reactjs - 如何从需要使用 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 })

score 1 · Accepted Answer

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

// Parent:
onDatesChange = (startDate, endDate) => {

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

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

1 回答 1