我正在构建一个react / redux应用程序并在前端使用名为Grommet的ux库。我已经设置了应用程序,以便在页面上的一组手风琴中包含一系列表单。这是一个仅包含一个手风琴标签的削减版本:
handleCpuChange(event) {
console.log(event.target)
this.props.updateStore(
{'general': {'cpus': event.target.value} }
)
}
<Accordion>
<AccordionPanel heading="General">
<Box>
<FormFields>
<FormField label='CPUs'>
<NumberInput
value={this.props.form.formData.general.cpus}
onChange={this.handleCpuChange.bind(this)}/>
</FormField>
<FormField label='Ram'>
<NumberInput
defaultValue={this.props.form.formData.general.ram}
onChange={this.handleCpuChange.bind(this)}/>
</FormField>
</FormFields>
</Box>
</AccordionPanel>
</Accordion>
- 所有这一切都很好。问题是,当我调用handleCpuChange函数时,我的状态/存储值被更新 - 但我的实际'value'或'defaultValue'字段保持不变。在大多数情况下,这没有问题,但如果我关闭并重新打开手风琴,那些字段中的值将重置为通过props提供的默认值/值。我认为解决这个问题的一个很好的方法是每当手风琴打开或关闭时将状态重新映射到实际值更新 - 但我不知道如何在不重新加载整个页面的情况下执行此操作。