reactjs - 将组件状态传递给 redux-form

Question

我正在使用react-day-picker多天选择http://react-day-picker.js.org/examples/selected-multiple。

我的问题：是否可以传递此组件的状态：

export default class MultiDayPicker extends Component {
state = {
   selectedDays: []
};

handleDayClick = (day, {selected}) => {
   const {selectedDays} = this.state;

if (selected) {
  const selectedIndex = selectedDays.findIndex(selectedDay =>
    DateUtils.isSameDay(selectedDay, day)
  );

  selectedDays.splice(selectedIndex, 1);
} else {
  selectedDays.push(day);
}
this.setState({selectedDays});
 };

 render() {
return (
  <div>
    <DayPicker
      selectedDays={this.state.selectedDays}
      onDayClick={this.handleDayClick}
    />
  </div>
);

陈述redux-form??

<Field
    name="dates"
    component={MutliDayPicker}
/>

Answer 1

在您的自定义MultiDayPicker组件中，您必须调用redux-form input.onChange方法。

所以为了改变redux-form状态，当你的MultiDayPicker值改变时，你必须添加以下redux-formapi 调用handleDayClick：

handleDayClick( day, { selected }) => {
  // Rest code here ...

  // Update `redux-form` state
  this.props.input.onChange(selectedDays)
}

您还必须考虑其余的redux-form输入属性和回调，并决定添加哪些支持。这是完整列表。

Answer 2

我从未使用过 DayPicker，但我使用过 DayPickerInput，如果可以的话，可以将它代替 DayPicker，您可以简单地将其放入 DayPickerInput inputProps={{...this.props.input}}，因为 inputProps 被定义为添加到输入组件的附加道具。

Redux Form 需要在您从 Field 传递的字段中找到输入名称来绑定值。

我猜您还应该使用 onDayChange 而不是 onDayClick。

代码：

<DayPickerInput inputProps={{...this.props.input}} onDayChange={this.props.input.onChange} />

您可以在此处找到更多信息：DayPickerInput：inputProps