Javascript React Select不会在单击选项时更新值
我有一个React Select表单,在API调用后加载选项。车间的初始状态值已设置,并在表单中单击某个选项后更新。但是,选择的视图不会更新。此外,提交表单后,研讨会成功保存到数据库中。我该怎么办Javascript React Select不会在单击选项时更新值,javascript,reactjs,lodash,react-select,Javascript,Reactjs,Lodash,React Select,我有一个React Select表单,在API调用后加载选项。车间的初始状态值已设置,并在表单中单击某个选项后更新。但是,选择的视图不会更新。此外,提交表单后,研讨会成功保存到数据库中。我该怎么办 renderForm() { return ( <section className="col-md-12 col-sm-12"> <form className="col-md-12 col-sm-12"
renderForm() {
return (
<section className="col-md-12 col-sm-12">
<form className="col-md-12 col-sm-12"
onSubmit={ this.handleSubmit }>
// other form-groups
<div className="form-group">
<label>
Region:
<input className="form-control"
type="text"
value={ this.state.value }
onChange={ this.handleRegionChange } required />
</label>
</div>
<div className="form-group">
<label>
Workshop:
</label>
<Select name="form-field-workshop"
value={ this.state.workshop }
onChange={ this.handleWorkshopChange }
options={ this.renderFormWorkshops() }
clearable={ false }
searchable={ false }
required />
</div>
<input className="btn btn-default"
type="submit"
value="Submit" />
</form>
</section>
);
}
// handles the change of state when an option is selected
handleWorkshopChange(value) {
this.setState({
workshop: value.label
});
}
// displays the options in the Select form
renderFormWorkshops() {
return _.map(this.props.workshops.workshops, (it) => {
return (
{ value: it.id, label: it.name }
);
});
}
您的构造函数中是否正确设置了它?这里可能会发生一些上下文问题,这是绑定上下文的正确形式:
constructor(props) {
super(props);
this.handleWorkshopChange = this.handleWorkshopChange.bind(this);
}
如果不使用箭头函数,则需要为依赖于使用此方法的情况绑定上下文
另外,这里还有一个括号:value={this.state.workshop}从此行中删除括号value={this.state.workshop}。应该是value={this.state.workshop}是的,绑定已经完成。不要介意这个问题,我在发布问题时没有看到它。它更新了视图,但它将id保存到数据库中。我会在那里处理。谢谢:
handleWorkshopChange(value) {
this.setState({
workshop: value.value
});
}