React Click事件处理最佳实践

Question

学习React时，我看到人们处理事件的方式不同。处理点击事件的最佳做法是什么？

这样好吗？将事件添加到要调用的类对象中？

import React from "react";class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    handleClick = handleClick.bind(this)
  }
  handleClick(){
    //Do some stuff
  }
  render(){
    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }}export default Foo;

还是这样？要在渲染“部分”中声明函数

import React from "react";class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render(){
    const handleClick = () => {
      //Do some stuff
    }
    return(
      <div onClick={handleClick}>
        Bar
      </div>)
  }}export default Bar;

有没有更好的办法？哪种编码模式最好？

Answer 1

官方文件反应使用：... &nbsp;&nbsp;&nbsp;&nbsp;handleClick&nbsp;=&nbsp;handleClick.bind(this)...但我认为，使用以下内容也更好：从“反应”中导入React;class&nbsp;Bar&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{}; &nbsp;&nbsp;} &nbsp;&nbsp;handleClick&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//Do&nbsp;some&nbsp;stuff &nbsp;&nbsp;} &nbsp;&nbsp;render(){ &nbsp;&nbsp;&nbsp;&nbsp;return( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;onClick={this.handleClick}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>) &nbsp;&nbsp;}}export&nbsp;default&nbsp;Bar;使用第二种方法，您不必关心使用.bind()。

Answer 2

我没有看到你提到的第二种方式，并且不建议这样做，因为它将为每个渲染创建一个新函数。我这样做的方式是这样的：class Foo extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {};&nbsp; }&nbsp; handleClick = () => {&nbsp; &nbsp; //Do some stuff&nbsp; }&nbsp; render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div onClick={this.handleClick}>&nbsp; &nbsp; &nbsp; &nbsp; Foo&nbsp; &nbsp; &nbsp; </div>)&nbsp; }}export default Foo;这样，您不需要构造函数中的绑定，但该函数仍然只创建一次。

Answer 3

你的第一种方法，使用你在构造函数中绑定的原型函数，除了你缺少的东西之外是好的this：this.handleClick&nbsp;=&nbsp;this.handleClick.bind(this);你的第二种方法是在每个渲染中创建一个新函数render。这使得handleClick为测试目的而难以模拟。您经常看到的第三种方法涉及在构造函数中在构造时创建箭头函数：this.handleClick&nbsp;=&nbsp;event&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;...};或使用财产声明：class&nbsp;Bar&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;handleClick&nbsp;=&nbsp;event&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;};}这些都具有相同的模拟/可测试性问题。除此之外，他们没事。