Question

我试图了解在React类组件中使用箭头功能和设置状态的两种方式之间的区别。两者似乎都可以正常工作并正确设置状态。

在受控组件中，我这样调用有问题的函数。

<input onChange={this.handleChange} placeholder="Enter name" />

我已经看到了定义这些函数的两种方式；

方法1。

handleChange = (e) => this.setState({ name: e.target.value});

方法2

handleChange = (e) => {
  this.setState({ name: e.target.value });
};

我的问题是：

一个人比另一个人更受青睐吗？
与仅执行其内容的方法2相比，方法1不是从函数返回值吗？

这是受控输入的工作代码段。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' }
  }

  handleChange = (e) => this.setState({ name: e.target.value});

  handleChange2 = (e) => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div className="App">
        <input onChange={this.handleChange} placeholder="Enter name" />
        <p>{this.state.name || 'no name yet'}</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

	<div id="root"></div>

任何有助于澄清这一点的方法以及被认为是最佳做法的方法都会有所帮助。

Answer 1

方法1 干净而且易于阅读。它不返回任何东西。请注意，此方法不需要e的括号。

如果您要在更改文本时不只是更改状态（setState()），最好使用

方法2 。例如，您想调用另一个函数，或者只是想以某种方式验证输入。另外，如果添加return语句，则可以返回值。

Answer 2

handleChange = (e) => this.setState({ name: e.target.value});

与

是一回事

handleChange = e => {
    return this.setState({ name: e.target.value});
};

在带有setState的React类组件中使用箭头函数的最佳实践

2 个答案: