React(2)-事件处理及条件渲染

事件处理

为了与传统HTML区别开，React事件命名采用小驼峰（camelCase）形式。
使用JSX语法时需要传入函数作为事件处理函数

1
2
3

<button onClick={function}>
Function
</button>

注意点

1. 阻止默认行为必须显式的使用preventDefault

   1 2 3 4 5 6 7 8 9 10 11

   function ActionLink(){ function handleClick(e){ e.preventDefault(); console.log("Clicked!"); } return ( <a href="#" onClick={handleClick}> Click me! </a> ); }

   e为合成事件，无跨浏览器的兼容问题。

2. 使用React不需要使用addEventListener为DOM元素添加监听器。只需要在元素初始渲染时添加监听器即可。

3. 使用class定义组件时，通常将事件处理函数声明为class的方法。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') );

   JavaScript中class方法默认不会绑定this。若在JSX中没有绑定this.handleClick并把它传入onClick。则调用函数时，this的值为undifined。

4. 事件绑定this
   优先使用方法一和方法二

   • 方法一：bind
     如3中代码所示

   • 方法二：class field语法
     class field语法为实验性语法

     1 2 3 4 5 6 7 8 9 10 11 12 13

     class LoggingButton extends React.Component{ handleClick = () => { console.log('this is:', this); } render(){ return ( <button onClick={this.handleClick}> Click me </button> ); } }

     create React app默认使用该方法。

   • 方法三：回调函数中使用箭头函数

     1 2 3 4 5 6 7 8 9 10 11 12 13 14

     class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 return ( <button onClick={() => this.handleClick()}> Click me </button> ); } }

向事件处理函数传递参数

当向事件处理函数传递额外参数时，有两种方式：

1
2
3
4

//方法一：箭头函数
<button onClick={(e) => this.deleteRow(id, e)}>Delete</button>
//方法二：Function.prototype.bind
<button onClick={this.deleteRow.bind(this,id)}>Delete</button>

箭头函数中，事件对象e必须显式的传递，bind方式，事件对象e及更多参数会被隐式的传递。

条件渲染

使用if渲染

即if-else语法。

1
2
3
4
5
6
7
8
9
10
11
12
13

if(条件){
    return 元素1;
}else{
    return 元素2;
}
//或
let 变量;
if(条件){
    变量 = 元素1;
}else{
    变量 = 元素2;
}
return (变量);

条件运算符

条件运算符为JSX中内联条件渲染的方法，通过花括号{}包裹代码。

使用&&渲染

1

{条件 && 表达式}

true && expression => expression
false && expression => false

1
2
3
4
5

{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}

三目运算符

1

{ condition ? true expression : false expression}

阻止渲染（隐藏组件）

若希望组件隐藏，可以让render方法返回null。不进行任何渲染，此种方式不会影响组件的生命周期。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);