005|React之事件处理

在React的事件处理和HTML事件处理非常相似，我们像如下这样处理一个Button的点击事件：

// 普通HTML中添加点击事件

  Activate Lasers


// React中添加点击事件

  Activate Lasers

在HTML中我们通过return false来拒绝默认行为，而React中需要调用preventDefault方法。如下：

// 通过return false拒绝默认行为

  Click me


//  通过preventDefault拒绝默认行为
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    
      Click me
    
  );
}

和其它JavaScript方法一样，我们需要特别注意this的指向与绑定。下面这种方式通过bind来绑死函数与this：

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

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

render() {
    return (
      
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      
    );
  }

还可以通过arrow function来绑定this指向，如：

  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
       this.handleClick(e)}>
        Click me
      
    );
  }

React中如何处理表单？

好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。