ReactJS 组件设置状态什么都不做？

Question

我是 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>
    );
  }
}

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

Answer 1

您没有为输入赋值。

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

Answer 2

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

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

因此，this.state 导致组件呈现，当它 re-renders 时，元素的值（input-in 示例）被设置为 this.state 的新值。学期。

ReactJS 组件设置状态什么都不做？

ReactJS component set state not doing anything?

flux

reactjs

react-redux