Javascript 组件赢得'；设置状态后重新加载

我最近开始使用React，希望构建一个小应用程序来获取天气数据。我的API有一个返回自动完成建议的函数。因此，当我的autosuggestion数组不为空时，我会呈现一个列表，单击其中一个

后，我希望输入框中包含该值。我设法设置搜索栏的状态，但无法更改其值。


编辑：我尝试将我的值从
changeState（）
获取到我的
this.updateInputValue（evt）}/>
。我可以搜索其他术语

import React from 'react';
import './SearchBar.css';
import Suggestion from './Suggestion';

class SearchBar extends React.Component{
  constructor(props) {
    super(props);
    this.state = {inputValue: ''};
    this.search = this.search.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.changeState = this.changeState.bind(this);
  }

  changeState(value) {
    console.log(value);
    // Logs value of text between <li></li>
    this.setState({inputValue: value});
  }

  search() {
    this.props.onSearch(this.state.inputValue);
  }

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
    this.props.onChange(this.state.inputValue);
  }

  handleKeyPress(e) {
    if(e.key === 'Enter') {
      this.search();
    }
  }

  render() {
    return (
      <div>
        <div className="SearchGroup" onKeyPress={this.handleKeyPress} >
          <input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} />
          <a onClick={this.search}>Go</a>
        </div>
        <Suggestion autocomplete={this.props.autocomplete} onSelect={this.changeState} />
      </div>
    );
  }
}

export default SearchBar;

我还希望在
建议中提交
location.url
，但我找不到与
evt
内部匹配的属性。我猜您正在尝试使用尚未存在的状态的值，因为setState是异步的
因此，在setState上使用callback

updateInputValue(evt) {
  this.setState({
    inputValue: evt.target.value
  }, ()=> this.props.onChange(this.state.inputValue));
}

或者，直接使用事件中的值

updateInputValue(evt) {
  const value = evt.target.value
  this.setState({
    inputValue: value
  });
  this.props.onChange(value)
}

另外，您尚未将值重新分配给输入：

this.updateInputValue（evt）}value={this.state.inputValue}/>
如我在评论中所述。您正在设置状态并立即将状态传递给updateInputValue事件处理程序函数中的onChange函数，这是不正确的。由于不会立即更新状态值，因此状态值仅在呈现时更新，因此，请直接像下面那样传递evt.target.value

updateInputValue(evt) { 
   this.setState({ inputValue: evt.target.value }); 
   this.props.onChange(evt.target.value);
}

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>

为了在您的输入字段中看到更改后的值，您必须将value prop传递给输入标记，如下所示

updateInputValue(evt) { 
   this.setState({ inputValue: evt.target.value }); 
   this.props.onChange(evt.target.value);
}

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>

this.updateInputValue（evt）}value={this.state.inputValue}/>
反应设置状态不会立即更新状态。它将其放入队列并批量更新状态。如果要访问更新的状态，请在setState回调中编写代码

this.setState({ inputValue: evt.target.value},()=> this.props.onChange(this.state.inputValue));

类似这样的东西
也许你应该试试{this.changeState（e）}/>@Mehmetnuri这有什么不同？OP已经显式绑定了它。这应该是updateInputValue（evt）{this.setState（{inputValue:evt.target.value}）；this.props.onChange（evt.target.value）；//在这里，如果传递状态值，则不会得到更新的值，它仅在呈现后更新，因此需要将evt.target.value直接传递给onChange}虽然这是重写我的一些代码的干净整洁的方法，但它不会更改我输入字段的值。@PeterS您需要将value prop传递给输入标记this.updateInputValue（evt）}value={this.state.inputValue}/>