React学习总结4--事件处理

demos源码

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
• 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return (
            <div>
                <a href="#" onClick={this.handleClick}>
                    a标签
                </a>
            </div>
        );
    }

    handleClick(e) {
        e.preventDefault();
    }

无传参情况

1. 在constructor中手动绑定this,如上代码。
2. 使用实验性的 public class fields 语法

 <div onClick={this.publicFieldsHandle}>publicFieldsHandle</div>

  publicFieldsHandle = () => {
    console.log(this)
  }

3. 回调中使用箭头函数
   每次渲染组件时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。

<div onClick={e => {this.arrowHandle()}}>arrow callback</div>

arrowHandle() {
    console.log(this);
}

通常在构造器中绑定或使用 class fields 语法来避免这类性能问题。

传参情况

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

React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。