ReactJS - 05 - ReactJS之入门之03之事件 Event 处理

ReactJS - 05 - ReactJS之入门之03之事件 Event 处理

一、事件处理代码（写法一）：

<script type="text/babel">

class Toggle extends React.Component {

    constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
    }

    //使用箭头函数使当前的 this 对象绑定进函数中。
    handleClick = () => {
        this.setState({
            isToggleOn: !this.state.isToggleOn
        });
    }

    render() {
        return (
            <button onClick={ this.handleClick }>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

</script>

二、事件处理代码（写法二）：

<script type="text/babel">
//
//
// 1. 如果 handleClick 不是箭头函数（即：具有单独的this 作用域），
// 2. 则需要绑定当前的 this 对象给 handleClick 函数
//
//


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

	//2. 则需要绑定当前的 this 对象给 handleClick 函数
    this.handleClick = this.handleClick.bind(this);
  }

  // 1. 如果 handleClick 不是箭头函数（即：具有单独的this 作用域），
  handleClick() {
    this.setState({
       isToggleOn: !this.state.isToggleOn
    });
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);
</script>

三、事件处理代码（写法三）：

当需要向 onClick 函数传递参数时，需要以下写法：

创建一个新的 arrow 回调函数，以绑定 this，并传参。


注意：
使用本写法有个问题就是每次 Toggle 渲染的时候都会创建一个新的回调函数。
如果不向 onClick 函数 传参，请避免使用本写法。


1、组件内部：传参

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

    参数 e 作为 React 事件对象将会被作为第二个参数进行传递。

deleteRow(id, e){    //事件对象e要放在最后
    e.preventDefault();
    alert(id);
}

2、组件嵌套：props 传参

function Square(props) {  
  return (
      <button className="square" 
         onClick={props.onClick}>  
                 {props.value}  
      </button>  
  );  
}  
  
class Board extends React.Component {  
    
  renderSquare(i) {  
    return (  
      // 创建一个新的 arrow 回调函数，以绑定 this，并传参。
      <Square value={this.props.squares[i]}  
              onClick={() => this.props.onClick(i)}  
       />  
    );  
  }  
  
  render() {  
    return (  
      <div>  
        <div className="board-row">  
          {this.renderSquare(0)}  
          {this.renderSquare(1)}  
          {this.renderSquare(2)}  
        </div>
      </div>  
    );  
  }  
}  

3、例子

<script type="text/babel">
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  // 1. 如果 handleClick 不是箭头函数（即：具有单独的this 作用域），
  handleClick() {
    this.setState({
       isToggleOn: !this.state.isToggleOn
    });
  }

  render() {
    return (
      //2. 在这里写一个新的箭头函数，把当前的 this 对象绑定进去，并传参。
      // 注意：这里没有传参，请使用上面的两种写法。
      <button onClick={ () => { this.handleClick() }}>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);
</script>

引用：

https://reactjs.org/docs/handling-events.html


在线演示






转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2429536




















-