如何从需要函数使用反应日期设置状态的子组件设置状态?

Question

我正在使用反应日期来尝试设置所选日期的状态：

<DateRangePicker 
...
onDatesChange={({ startDate, endDate }) => this.setState({ startDate, 
endDate })} 
...
/> // PropTypes.func.isRequired

如果它位于状态所在的主组件中，则此方法可以正常工作，但是我现在在该组件的子组件中具有DateRangePicker，因此我不能仅从子组件设置状态。

我尝试编写一个位于父组件中的函数来设置状态，但这不起作用：

在子组件中：

<DateRangePicker 
...
onDatesChange={({ startDate, endDate }) => props.onDatesChange({ startDate, 
endDate })}
...
/> 

在父组件中：

onDatesChange = (startDate, endDate) => {
this.setState({
startDate,
endDate
})
};

尽管这适用于 DateRangePicker 中设置父级状态的另一个参数：

在孩子中：

<DateRangePicker 
...
onFocusChange={props.onFocusChange}
...
/> 

在父级中：

onFocusChange = focusedInput => this.setState({ focusedInput })

Answer 1

看起来您正在使用对象调用props.onDatesChange，但父组件的onDatesChange函数采用两个参数。

// Parent:
onDatesChange = (startDate, endDate) => {
// Child:
props.onDatesChange({ startDate, endDate })

我可能会更改父级以获取对象，以使其与其他类似函数保持一致。