响应自定义组件-不能基于道具设置状态
响应自定义组件-不能基于道具设置状态
提问于 2019-08-21 19:41:52
我必须用内部状态绑定自定义datepicker组件：
this.state = {
selectedDate: null,
dateText: ""
};到redux表单字段组件。规则很简单-来自自定义组件外部的值将通过带有道具的redux表单传递给它：
{input: {value: "10-10-2010"} }如您所见，我的自定义组件将不会反映这个新值，因为它的内部字段绑定到它的状态：
<TextField
value={this.state.dateText}
onChange={this.handleDateInputChange}
/>所以我需要根据这个支柱来设定我的内部状态。这就是问题开始的地方：
- 如果我试图比较shouldComponentUpdate中的前一个和下一个道具值(如果它只是父组件的支持更新)，就会发现TextInput响应性非常奇怪的问题--比如必须两次点击backspace才能删除一个字符。
- 如果我尝试在setState ()中，以及在其他生命周期挂钩中，它显然会失败
- 如果我试图将TextField绑定到props.input.value，它将无法工作，因为“道具是用来将值传递给组件的”
如果我所说的“更新内部状态”是指：
- setState，以便TextField显示由带有道具的父组件传入的值。
- 重新创建内部selectedDate字段
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-21 19:54:34
您可以尝试使用getDerivedStateFromProps。此方法在React类组件中可用，并且是静态的。在这里，您可以根据更新的属性更新组件的状态。为此，还保存状态内的最后一个属性值，以便进行比较。
state = {
propDateText: this.props.dateText,
dateText: "",
}
getDerivedStateFromProps({ dateText }, { propDateText }) {
if(propDateText !== dateText) {
return { dateText, propDateText: dateText }
}
return null
}这将将最后一组属性dateText与实际属性dateText进行比较，并相应地替换状态内的dateText。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57598250
复制相关文章
相似问题
腾讯云开发者
