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

Posted 2023-02-22

【中文标题】ReactJS 组件设置状态没有做任何事情？

【英文标题】：ReactJS component set state not doing anything?

【发布时间】：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

谢谢我明白为什么它会出错

【参考方案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 ) />