Question

我必须将具有内部状态的自定义datepicker组件绑定：

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

到redux形式的Field组件。规则很简单-自定义组件外部的值将通过带有道具的redux-form传递给它：

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

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

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

因此，我需要基于此道具以某种方式设置我的内部状态。这是问题开始的地方：

如果我尝试在 shouldComponentUpdate 中比较上一个和下一个Props值（目的是为了防止render（）如果它只是父组件的prop更新），我会遇到TextInput响应性很奇怪的问题-就像必须按两次退格键才能删除一个字符一样。
如果我尝试在render（）以及其他生命周期挂钩中设置setState，显然会失败
如果我尝试将TextField绑定到props.input.value，它将无法正常工作，因为“ props用于将值传递给组件”

如果通过“更新内部状态”来表示，我如何基于传入的prop更新组件的内部状态：

setState，以便TextField显示带有组件的父组件传入的值
重新创建内部selectedDate字段

Answer 1

您可以尝试使用var columnNum = $(this).parent().children().index($(this));。该方法在React类组件中可用，并且是静态的。在这里，您可以根据更新的属性来更新组件的状态。为此，还可以将状态中的最后一个属性值保存下来以便于比较

getDerivedStateFromProps

这会将最后设置的属性state = { propDateText: this.props.dateText, dateText: "", } getDerivedStateFromProps({ dateText }, { propDateText }) { if(propDateText !== dateText) { return { dateText, propDateText: dateText } } return null }与实际属性进行比较，并将状态内的dateText替换为该状态。

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

1 个答案: