代码之家 › 专栏 › 技术社区 › Roy Scheffers suresh sunkari

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

arrow-functions reactjs javascript

Roy Scheffers suresh sunkari · 技术社区 · 6 年前

我试图理解在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>

任何有助于澄清这一点和被视为最佳做法的做法都将是有益的。

2 回复 | 直到 6 年前

MTMD 6 年前

方法1 是干净和简单的阅读。它不返回任何内容。注意,这个方法不需要括号 e .

方法2 如果你想做更多的事情( setState() )当文本更改时。例如,您想调用另一个函数,或者只是想以某种方式验证输入。此外,如果添加了return语句,则可以返回值。

orzorzorzorz 6 年前

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

是同一件事

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前