reactjs - 如何使用 React setState 更新 json 对象的动态变化字段？

Question

我有一个对象，它的字段是动态变化的，例如，

var Obj = {f1:"", f2:""} or  var Obj = {f1:"", f2:"", f3:"" } etc

对于对象的每个字段，屏幕上都会动态显示一个输入字段。我想使用用户在每个字段中输入的值来设置对象的状态。我怎样才能做到这一点？我已经尝试了以下代码，但它并不总是能正常工作。

for (var key in this.state.Obj) {
        if (this.state.Obj.hasOwnProperty(key)) {
            this.setState({
                Obj: update(this.state.Obj, {[key]: {$set: window.$('[name='+key+']')[0].value}}),
            })
        }
    }

Answer 1

如前所述，您应该在所需的onChange任何输入字段上使用。您可以执行以下操作：

<input
  type="text"
  value={this.state.Obj.f1}
  onChange={(e) => {
    // Make sure you keep values from other fields
    var object = this.state.Obj;

    // Modify the value on the object
    object.f1 = e.target.value;

    // Update the state
    this.setState({ Obj: object });
  }}
/>