Question

我的状态如下：

onChanged

我有几个输入字段通过使用匹配ID并使用以下函数调用的inputChangedHandler = (event) => { const updatedState = { ...this.state, isDirty: true }; updatedState.form[event.target.id] = event.target.value; this.setState(updatedState); }事件链接回状态：

{{1}}

我的问题是这是在绑定表单时设置状态的最佳方法吗？有没有办法让它使用更少的线条而不会过于复杂？我发现我必须在每个页面上执行这些代码，我使用表单进行双向绑定（有更好的方法吗？）。

任何输入都将不胜感激！谢谢！

Answer 1

实际上，有很多方法可以做到这一点。

我觉得这是一种使用spread operator

的简单方法

  inputChangedHandler = (event) => {
    const id = [event.target.id];
    const value = [event.target.value];
    this.setState(prevState => ({
      form: {...prevState.form, 
           [id]: value
      }, isDirty: true
    }))
  }

Answer 2

如果你想缩短它：

inputChangedHandler = (id, value) => {
    const { form } = this.state;

    this.setState({
       isDirty: true,
       form: Object.assign({}, form, { [id]: value }
       // or using lodash, this way you will be able to update nested object values
       form: Object.assign({}, form,  _.set(form, id, value)
    });
} 

...

<input id="username" onChange={({ target }) => inputChangeHandler(target.id, target.value)} />

虽然我建议您使用reduxForm https://redux-form.com/7.3.0/examples/simple/

使用动态密钥名称设置状态的最佳方法？

2 个答案: