当我输入输入时，onChange 处理程序没有更新状态答案

【问题标题】：onChange handler isn't updating state when I type in input当我输入输入时，onChange 处理程序没有更新状态
【发布时间】：2020-01-10 19:13:43
【问题描述】：

我的 onChange 处理程序应该使用我在输入中键入的任何内容来设置我的状态，但是当我之后记录我的状态时，它没有得到更新。

我不确定该尝试什么。

handleInputChange(e) {
    this.setState({
      insightsDTO: {
        [e.target.id]: e.target.value
      }
    }, () => console.log(this.state, 'handle input change this.state'))
}

<div className="Form-group publish-insights-input">
  <label class="Form-label">
    URL <span className="asterisk">*</span>:
  </label>
  <input
    type="text"
    id="insightURL"
    placeholder="URL"
    class="Form-input"
    onChange={this.handleInputChange}
    value={this.state.insightsDTO ? this.state.insightsDTO["insightURL"] : ""}
  />
</div>;

当我在 devtools 上查看它时，它会将 [e.target.id] 设置为“insightURL”，并将 e.target.value 设置为我输入的任何内容，但是之后当我记录状态时，我没有看到那个 e.target.value。它仍然只是一个空字符串。

【问题讨论】：

嗨 Annah，检查我的解决方案，如果有帮助，请告诉我。
React HTML select element onChange function, trying to access 'event.target.value'的可能重复

标签： reactjs redux react-redux

【解决方案1】：

你在构造函数中 bind 你的更改处理程序了吗？

  constructor(props) {
    super(props);

    this.state = {};

    this.handleInputChange = this.handleInputChange.bind(this);
  }

在此处查看完整示例：

另请参阅受控组件的 React 文档：https://reactjs.org/docs/forms.html#controlled-components

无关，也请务必使用className（不是class）。

【讨论】：