在React中调用this.setState（{term：''}）之后，输入值未重新呈现

Question

I am following a react tutorial and trying to re-render the value of a form input field after the user submits the form. However, the value in the input remains in a previous state despite updating the state as shown below.

    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 is just a function that sends a get request. Any help on why the value field is not re-rendering with the new state will be highly appreciated.

Answer 1

try this

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