我必须将自定义日期选择器组件与内部状态绑定:
this.state = {
selectedDate: null,
dateText: ""
};
到redux表单字段组件。规则很简单-来自我的自定义组件外部的值将通过redux表单通过以下道具传递给它:
{input: {value: "10-10-2010"} }
如您所见,我的自定义组件不会反映此新值,因为其内部字段绑定到其状态:
<TextField
value={this.state.dateText}
onChange={this.handleDateInputChange}
/>
所以我需要根据这个道具来设置我的内部状态。这就是问题开始的地方:
如果“更新内部状态”是指:
您可以尝试使用getDerivedStateFromProps
。此方法在React类组件中可用,并且是静态的。在这里,您可以根据更新的属性更新组件的状态。为此,还应保存状态中的最后一个属性值,以便于比较
state = {
propDateText: this.props.dateText,
dateText: "",
}
getDerivedStateFromProps({ dateText }, { propDateText }) {
if(propDateText !== dateText) {
return { dateText, propDateText: dateText }
}
return null
}
这将比较最后设置的属性dateText
与实际属性,并相应地替换状态中的dateText
。