Question

我正在尝试在ReactJS中更新我的状态。为此，我在Reactjs类中有一个输入字段。该字段将自动填入父类的数据。该字段如下所示：

           <input
            onChange={e => this.props.store.addLego(e)}
            name="piece"
            value={this.props.row.original.piece}
          />

addLego函数旨在更新我的状态并位于MobX存储中。它看起来像这样：

 addLego = action("addLego", e => {
this[e.target.name] = e.target.value;
});

但是，我实际上无法编辑输入字段！当我输入时，该字段没有任何变化！谢谢你的帮助！

Answer 1

如果您将value字段设置为<input>字段，则该字段将成为受控输入。这意味着传递给value的任何内容都会在屏幕上呈现。在您的情况下，如果您未更新this.props.row.original.piece，则<input>字段将永远不会获得新值。我建议您阅读React的文档https://reactjs.org/docs/forms.html#controlled-components

它基本上建议将新值保留在某处（例如，在组件的状态中），并将其设置为该字段的值。

Answer 2

关注this tutorial此处将解决您的问题。处理单个或多个输入也是一个很好的阅读

基本上，你在构造函数中需要一个状态

this.state = {value: ''};

每个onchange

设置值的事件处理程序

handleChange(event) {
    this.setState({value: event.target.value});
  }

输入设置

<input type="text" value={this.state.value} onChange={this.handleChange} />

在Reactjs中更新状态？

2 个答案: