React起手-事件处理

React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别:

  • React的事件名是驼峰的,不是小写的
  • 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string

举个例子:

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

而且如果你想拿到事件对象event,这个对象是React按照w3c标准完成的,所以不用担心浏览器的兼容性,可以像如下这样:

function ActionLink() {  
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

如果用ES6的class写法可以像如下一样:

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

    // 这个`this`绑定是有必要的,用来让this可以在回调中被正确指向React组件的实例对象
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

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

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

还有两种方式可以避免写显式bind(this),但是都不推荐这么用啊~所以就不再赘述~

如果我的文章对您有帮助
欢迎打赏(。・ω・)

Zhang Xiao

Read more posts by this author.

beijing