提问者:小点点

React自定义组件-无法基于道具设置状态


我必须将自定义日期选择器组件与内部状态绑定:

this.state = {
  selectedDate: null,
  dateText: ""
};

到redux表单字段组件。规则很简单-来自我的自定义组件外部的值将通过redux表单通过以下道具传递给它:

{input: {value: "10-10-2010"} }

如您所见,我的自定义组件不会反映此新值,因为其内部字段绑定到其状态:

<TextField
  value={this.state.dateText}
  onChange={this.handleDateInputChange}
/>

所以我需要根据这个道具来设置我的内部状态。这就是问题开始的地方:

  • 如果我试图比较前一个和下一个道具值在应该组件更新(目的是防止渲染(),如果它只是父组件的道具更新)我得到非常奇怪的问题与文本输入响应-像必须点击退格两次删除一个字符.
  • 如果我尝试设置国家在渲染(),以及在其他生命周期钩子,它显然会失败
  • 如果我试图将TextField绑定到props.input.value它将不起作用,因为道具用于将值传递给组件

如果“更新内部状态”是指:

  • setState,以便TextField显示父组件通过props传入的值
  • 重新创建内部selectedDate字段

共1个答案

匿名用户

您可以尝试使用getDerivedStateFromProps。此方法在React类组件中可用,并且是静态的。在这里,您可以根据更新的属性更新组件的状态。为此,还应保存状态中的最后一个属性值,以便于比较

state = {
   propDateText: this.props.dateText,
   dateText: "",
}

getDerivedStateFromProps({ dateText }, { propDateText }) {
  if(propDateText !== dateText) {
     return { dateText, propDateText: dateText }
  }
  return null
}

这将比较最后设置的属性dateText与实际属性,并相应地替换状态中的dateText