肉渣教程

事件处理

上一节 下一节

React元素的事件处理与DOM元素类似,但语法上有一些区别


React 事件

React元素与DOM元素的事件处理的语法区别:

  • React事件的命名应采用小驼峰式(camelCase),而不要使用纯小写
  • 使用JSX语法时需要传入一个函数作为事件处理函数,而不是一个JS语句


传统的HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>


在React中则如下所示:

<button onClick={activateLasers}>
  Activate Lasers
</button>

阻止事件生效

在HTML中通过返回false即可阻止事件生效:

<a href="https://zhuanfou.com" onclick="console.log('该链接被点击了'); return false">
  来点我呀
</a>


在React中则如下所示:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('该链接被点击了');
  }

  return (
    <a href="https://zhuanfou.com" onClick={handleClick}>
      来点我呀
    </a>
  );
}

回调函数要绑定this

如下所示的类组件的构造器中要将this绑定到该回调函数中:

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

    // 绑定才可以在回调函数handleClick中调用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')
);

运行一下


如果不想在构造器中bind,可用如下简化写法,直接将事件绑定对象传到函数中去,与上述代码是等效的。

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

运行一下

向事件处理函数传参

在React中,以下两种方式都可以向事件处理的回调函数传递参数:

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

事件处理

上一节 下一节