ReactJS 组件设置状态没有做任何事情？答案

【问题标题】：ReactJS component set state not doing anything?ReactJS 组件设置状态没有做任何事情？
【发布时间】：2017-06-13 09:45:51
【问题描述】：

我是 ReactJS 的新手。我正在尝试做如下搜索栏：

class SearchBar extends Component {
  constructor(props) {
    super(props);

  this.state = {term: ''};
  }

  render() {
    return (
      <div>
        <input onChange={ event => this.setState({ term: event.target.value })} />
      </div>
    );
  }
}

它可以工作，但问题是我无法获得输入的更改值。它出什么问题了？我找不到解决方案。感谢您的帮助。

【问题讨论】：

你从来没有在render()中实际使用过state.term
谢谢我明白为什么它会出错

标签： reactjs react-redux flux

【解决方案1】：

您没有设置输入的值。您需要将输入更改为受控组件，该组件的值由状态设置，因此它的值仅在状态更改时更改。

<input
      value = { this.state.term }
      onChange= { (event) => this.setState({ term: event.target.value }) } />

因此，this.state 导致组件渲染，当它重新渲染时，元素的值（输入示例）被设置为 this.state.term 的新值。

【讨论】：

【解决方案2】：

您没有为输入分配值。

<input value={this.state.term} onChange={ event => this.setState({ term: event.target.value })} />

【讨论】：