在反应中调用this.setState（{term：''}）之后，输入值没有被重新渲染

问题描述：

我正在关注一个反应教程，并尝试在用户提交表单后重新呈现表单input字段的值。但是，尽管如下所示更新了状态，但input中的值仍处于先前状态。在反应中调用this.setState（{term：''}）之后，输入值没有被重新渲染

constructor(props){ 
     super(props); 
     this.state = { term: '' }; 
     this.onInputChange = this.onInputChange.bind(this); 
     this.onFormSubmit = this.onFormSubmit.bind(this); 
    } 
    render(){ 
     return(
      <form onSubmit={this.onFormSubmit} className="input-group"> 
       <input 
        placeholder="Search Days Forecast" 
        className="form-control" 
        value={this.state.value} 
        onChange={this.onInputChange} 
       /> 
       <span className="input-group-btn"> 
        <button type="submit" className="btn btn-secondary"> Submit </button> 
       </span> 
      </form> 
     ); 
    } 

    onInputChange(event){ 
     this.setState({term: event.target.value}); 
    } 
    onFormSubmit(event){ 
     event.preventDefault(); 
     this.props.fetchWeather(this.state.term); 
     this.setState({ term: '' }); 
    } 
}function mapDispatchToProps(dispatch){ 
     return bindActionCreators({ fetchWeather }, dispatch); 
    } 
export default connect(null, mapDispatchToProps)(SearchBar);

fetchWeather只是一个发送获取请求的函数。为什么价值领域不是重新呈现与新状态的任何帮助将不胜感激。

答

试试这个

  <input 
       placeholder="Search Days Forecast" 
       className="form-control" 
       value={this.state.term} 
       onChange={this.onInputChange} 
      />

不，这是行不通的。出于好奇，然而，当你做 'state.term = e.target.value'不是你直接设置状态吗？你为什么后面做'this.setState（state）'？ –

有时候，它的作品....这就是为什么我这样做... 看到更新的一个 –

oooh我的坏。键入'value = {this.state.value}'而不是'value = {this.state.term}'。谢谢 –

在反应中调用this.setState（{term：''}）之后，输入值没有被重新渲染

相关推荐