React 入门小册(四)事件处理

React 事件处理

React 提供了一个与浏览器兼容的、性能较优的解决方式，通过在组件内部调用 handleEvent 方法，并把它赋值给 DOM 属性，从而对事件进行监听。React 支持所有常见的浏览器事件，如 click、submit 等。

定义处理函数

handleClick() {
  console.log('Clicked');
}

传递函数作为事件处理程序：

<button onClick={this.handleClick}>Click me</button>

防止 this 失效：

使用箭头函数或者bind方法将需要绑定的函数绑定到当前实例的this上

状态（state）更新：

使用 setState API 更新状态，以重新渲染组件并反映新的状态。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

在这个计数器示例中，我们在构造函数里初始化了 count 的状态为 0。当用户点击按钮时，我们 handleClick 按钮单击事件处理方法将采取先前的状态，增加1 ,然后使用 setState 方法更新状态以重新呈现计数器。

这是React事件处理的基本知识，一些高级概念如SyntheticEvent、防止事件冒泡和事件捕获等内容可以在开发具体项目过程中学到。