当我输入内容时，onChange处理程序不会更新状态

Question

我的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。仍然只是一个空字符串。

Answer 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）。