欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-17 09:06:13
...
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




















-