目 录CONTENT

文章目录

React-React事件处理与条件渲染

恪晨
2019-11-22 / 0 评论 / 0 点赞 / 1,415 阅读 / 1 字 / 正在检测是否收录...
温馨提示:
慢慢看,慢慢读,不行就边听歌边读

事件处理

  React中,使用事件的方式与原生JavaScript中使用事件方式类似,但是在React中,事件的命名采用的是小驼峰式(类似eventName),并且在JSX语法中,需要给事件传入一个函数,而不是字符串。如:

<button onClick={eventName}>click me</button> // eventName为函数名

  在React中,不同通过函数返回false来阻止事件发生,必须要显式的使用preventDefault,如下代码所示,此处e 是一个合成事件,React 根据 W3C 规范来定义这些合成事件。

function  ActionLink() {
  function handleClick(e) {
    // 阻止事件默认行为
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    // 将不会跳转到index.html
    <a href="/index.html" onClick={handleClick}>Click me</a>
  );
}
class Page extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        <ActionLink />
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);
为事件函数传递参数
 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
 或
 <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

  在这两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

为事件绑定this
  • 使用箭头函数绑定
       <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    
  • 使用内联式bind绑定
       <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
    
  • 在构造函数中绑定
       constructor(props) {
         super(props);
          // 为了在回调中使用 `this`,这个绑定是必不可少的
         this.deleteRow = this.deleteRow.bind(this);
       }
    

条件渲染

  React中的条件渲染与JavaScript中一样,通过使用if或者其它条件运算符去创建元素来进行显示。如:

 // 定义组件Test1
 function Test1(props) {
     return <h1>hello,我是test1</h1>
 }
 
 // 定义组件Test2
 function Test2(props) {
     return <h1>hello,我是test2</h1>
 }
 
 // 定义组件AllTest
 function AllTest(props) {
     const isShow = props.isShow;
     if (isShow) {
         return <Test1 />;
     }
     return <Test2 />;
 }
 
 ReactDOM.render(
   // 默认传入isShow为false
   // 通过对isShow进行不同的值控制组件的显示
   <AllTest isShow={false} />,
   document.getElementById('root')
 );
元素变量

  使用变量来储存元素。 它可以有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。

 class LoginControl extends React.Component {
   constructor(props) {
     super(props);
     this.handleLoginClick = this.handleLoginClick.bind(this);
     this.handleLogoutClick = this.handleLogoutClick.bind(this);
     this.state = {isLoggedIn: false};
   }
 
   handleLoginClick() {
     this.setState({isLoggedIn: true});
   }
 
   handleLogoutClick() {
     this.setState({isLoggedIn: false});
   }
 
   render() {
     const isLoggedIn = this.state.isLoggedIn;
     let button;
 
     if (isLoggedIn) {
       button = <LogoutButton onClick={this.handleLogoutClick} />;
     } else {
       button = <LoginButton onClick={this.handleLoginClick} />;
     }
 
     return (
       <div>
         <Greeting isLoggedIn={isLoggedIn} />
         {button}
       </div>
     );
   }
 }
 
 function UserGreeting(props) {
   return <h1>Welcome back!</h1>;
 }
 
 function GuestGreeting(props) {
   return <h1>Please sign up.</h1>;
 }
 
 function Greeting(props) {
   const isLoggedIn = props.isLoggedIn;
   if (isLoggedIn) {
     return <UserGreeting />;
   }
   return <GuestGreeting />;
 }
 
 function LoginButton(props) {
   return (
     <button onClick={props.onClick}>
       Login
     </button>
   );
 }
 
 function LogoutButton(props) {
   return (
     <button onClick={props.onClick}>
       Logout
     </button>
   );
 }
 
 ReactDOM.render(
   <LoginControl />,
   document.getElementById('root')
 );
&& 与运算符与三目运算符

  因为在JSX语法中,可以使用{}在其中嵌入任何表达式,因此在{}中使用&&运算符,可以像javaScript一样进行相关的逻辑功能。在Test组件中判断传入变量unreadMessages的长度进行UI渲染,当unreadMessages的长度为0时,&&后面的代码将不会执行。三目运算符中,当isLoggedIn为true时,currently字符就会显示,当为false时,not字符显示,这与javaScript中一样,只是React中是在{}中执行的。

 function Test(props) {
   const unreadMessages = props.unreadMessages;
   const isLoggedIn = props.isLoggedIn;
   return (
     <div>
       <h1>Hello!</h1>
       {unreadMessages.length > 0 &&
         <h2>
           You have {unreadMessages.length} unread messages.
         </h2>
       }
        <div>
             The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
     </div>
   );
 }
 
 const messages = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
   <Test isLoggedIn={true} unreadMessages={messages} />,
   document.getElementById('root')
 );
阻止组件渲染

  在某些情况下,希望组件能够被隐藏,即使它已经被其他组件渲染,这时只需要在render函数中返回null即可。在组件的 render 方法中返回 null 并不会影响组件的生命周期。如:

 // 定义一个判断是否显示Page组件的组件,根据传递的参数进行控制显示
 function WarningBanner(props) {
   if (!props.warn) {
     return null;
   }
 
   return (
     <div className="warning">
       Warning!
     </div>
   );
 }
 
 class Page extends React.Component {
   constructor(props) {
     super(props);
     this.state = {showWarning: true};
      // 为了在回调中使用 `this`,这个绑定是必不可少的
     this.handleToggleClick = this.handleToggleClick.bind(this);
   }
   
   // 点击事件进行组件显示与隐藏切换
   handleToggleClick() {
     this.setState(state => ({
       showWarning: !state.showWarning
     }));
   }
 
   render() {
     return (
       <div>
         // 根据showWarning的指判断是否渲染该组件
         <WarningBanner warn={this.state.showWarning} />
         <button onClick={this.handleToggleClick}>
           {this.state.showWarning ? 'Hide' : 'Show'}
         </button>
       </div>
     );
   }
 }
 
 ReactDOM.render(
   <Page />,
   document.getElementById('root')
 );

总结

  综上,描述了React中事件的绑定以及为事件传参,同时也了解到了React中的事件也可以像JavaScript中一样使用各种运算符进行实现,不同的是在阻止元素事件的默认行为时,React中需要使用preventDefault进行阻止,并且在阻止渲染的时候也是需要将render函数返回null即可,这与JavaScript还是存在一点小差别。

0
博主关闭了当前页面的评论