反应自定义组件 - 无法根据道具设置状态

Question

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

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

到 redux-form Field 组件。规则很简单——来自我的自定义组件外部的值将通过 redux-form 传递给它，属性为：

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

如您所见，我的自定义组件不会反映这个新值，因为它的内部字段绑定到它的状态：

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

所以我需要根据这个道具以某种方式设置我的内部状态。这是问题开始的地方：

如果我尝试比较 shouldComponentUpdate 中的上一个和下一个 Props 值（目的是防止 render() 如果它只是来自父组件的 prop 更新）我会非常TextInput 响应能力的奇怪问题 - 比如必须按两次退格键才能删除一个字符。
如果我尝试在 render() 以及其他生命周期挂钩中设置状态，显然会失败
如果我尝试将 TextField 绑定到 props.input.value 它不会起作用，因为 "props are for passing values to components"

如果 'update internal state' 我的意思是：

如何根据传入的 prop 更新我的组件的内部状态

setState，让TextField显示父组件用props传入的值
重新创建内部 selectedDate 字段

Answer 1

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

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

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

这会将最后一组属性 dateText 与实际的进行比较，并相应地替换状态中的 dateText。

反应自定义组件 - 无法根据道具设置状态

React custom component - can't set state based on props

reactjs

redux-form