我该如何从需要功能来设置带有react-dates状态的子组件中设置状态？

Question

我正在使用react-date尝试设置所选日期的状态：

<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 })

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