所以,我正在使用react-select
让用户从选项列表中选择一个选项。它应该更新变化。我已经验证所选的选项确实正在更新到数据库中,并且在React chrome工具中检查输入时React会识别输入。令人费解的是刷新页面后如何显示它。
class ContractBasicForm extends React.Component {
constructor (props) {
super(props)
this.state = {
contractingEntity: props.contracting_entity
}
componentWillReceiveProps(nextProps) {
this.setState({
contractingEntity: nextProps.contracting_entity
})
}
autoSetState = (newState) => {
this.setState(newState)
this.props.formSubmit()
}
render () {
return(
<div className="container-fluid">
<section className="row ml-2 mr-2 mt-2">
<article className="col-12 side-modal-form">
<SelectInput
header="Contracting Entity"
name="contract[contracting_entity]"
options={this.props.contracting_entity_opts}
value={this.state.contracting_entity}
userCanEdit={this.props.user_can_edit}
multi={false}
onChange={(e) => {
this.autoSetState({contracting_entity: e.value})
}}
/>
</article>
</section>
</div>
)
}
}
我有另一个名为Stage
的输入,它与ContractingEntity
非常相似,但刷新页面后会显示其值:
<SelectInput
header="Stage"
name="contract[stage]"
options={this.props.stage_opts}
value={this.state.stage}
userCanEdit={this.props.user_can_edit}
multi={false}
onChange={(e) => {
this.autoSetState({stage: e.value})
}}
/>
将在页面刷新时初始化React app状态。如果要在页面刷新后保留这些数据,则需要在localStorage中保留此类数据。这被认为是反应中的反模式,建议不要使用它,除非它变得必要。
我希望这能让你明白一切。