Question

我有一个onChange事件处理程序，其构成如下：

(e) => (value => this.setState(prevState => ({
        form: {
            ...prevState.form,
            email: value
        }
    })))(e.target.value)

我把它缩小到了这个

(e) => {
    let value = e.target.value;
    this.setState((prevState) => ({
        form: {
            ...prevState.form,
            password: value
        }
    }))
}

这些都不是很吸引人。我喜欢第一个b / c，它少了3行代码，但是也有很多括号。我可能还缺少其他可以进一步解决此问题的变体吗？使用散布运算符会增加一个额外的括号，可以通过某种方式将其删除吗？

谢谢

Answer 1

您可以从事件中解构出值，而只需执行setState作为唯一语句。

({ target: { value } }) => this.setState(prevState => ({
  form: {
    ...prevState.form,
    password: value
  }
}));

Answer 2

我个人会使用这个：

e => {
    let value = e.target.value;
    this.setState({
        form: {
            ...this.state.form,
            password: value
        }
    });
}

Answer 3

为您提供另一个想法:)

event => {
   const password = event.target.value;
   const form = { ...this.state.form, password };
   this.setState({ form });
}

首选的ES6箭头函数语法格式

3 个答案: