在反应中调用 this.setState({ term: ' ' }) 后，输入值不会被重新渲染

debugcn 发表于 Dev

埃西尔国王

我正在关注反应教程并尝试input在用户提交表单后重新呈现表单字段的值。但是，input尽管更新了状态，但中的值仍保持先前的状态，如下所示。

    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只是一个发送获取请求的函数。任何有关为什么不使用新状态重新渲染 value 字段的帮助将不胜感激。

阿什

试试这个

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。