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 }) } />

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

Answer 2

您没有为输入分配值。

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

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

2 个答案: