使用反应状态更新输入，反之亦然答案

【问题标题】：Updating input using react state and vice versa使用反应状态更新输入，反之亦然
【发布时间】：2018-11-30 12:27:29
【问题描述】：

我正在使用输入字段，最初我使用状态更新它。

<input type="text" value={this.state.opp.description} />

但是当我运行它时。输入根本不会改变值。

我的动机是首先使用状态更新输入，然后使用输入值更新状态。

我尝试使用 onChange，但这也不起作用。

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

var handleChange=(e)=>{
  this.setState({opp:{description:e.target.value}});
}

请建议我该怎么做。

【问题讨论】：

你能把代码发布到你的全班，让我们看看你做错了什么吗？只是说它不起作用并没有帮助

标签： reactjs state

【解决方案1】：

您的状态不会改变，除非您在输入的每次更改时将状态设置为输入的最新值。

<input type="text" value={this.state.opp.description} onChange={this.onInputChange} />
---------------------------------------------------------
onInputChange = e => {
  this.setState({
    opp: {
      description: e.target.value
    }
  });
}

编辑

工作示例 -> https://codesandbox.io/embed/vnjmyzp535

【讨论】：

@AbhishekKulshrestha 如果这不起作用，你就做错了。看看我的工作示例codesandbox.io/embed/vnjmyzp535
工作。我把handleChange放在渲染里面。也许这就是它不起作用的原因
putting 方法，或者你返回的 JSX 以外的任何东西都不应该在 render() 函数上。

【解决方案2】：

这对你有用吗？

export default class TextInput extends React.Component {
  state = {
    opp: {
      description: ''
    }
  };

  onChange = e => {
    this.setState({
      opp: { description: e.target.value }
    });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={this.onChange}
          value={this.state.opp.description}
        />
      state: {this.state.opp.description}
      </div>
    );
  }
}

【讨论】：

【解决方案3】：

将onChange 处理程序添加到您的输入，然后您可以在输入更改时更新您的状态。

handleChange = (e) => {
    this.setState({opp: { description: e.target.value } })
}

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

【讨论】：