Question

我正在关注反应教程并尝试在用户提交表单后重新呈现表单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只是一个发送get请求的函数。任何关于为什么值字段不会在新状态下重新渲染的帮助都将受到高度赞赏。

Answer 1

试试这个

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

在响应中调用this.setState（{term：''}）后，不重新呈现输入值

1 个答案: