将组件状态传递给 redux-form

Question

我正在使用 react-day-picker 多天 select 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值改变时，你必须在[=17]中添加以下redux-form api调用=]:

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

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

您还必须考虑其余 redux-form 输入属性和回调，并决定为哪些添加支持。 Here's the full list.

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

将组件状态传递给 redux-form

Pass component state to redux-form

reactjs

redux-form

react-day-picker