将组件状态传递给redux-form

Question

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

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

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值时，您必须在handleDayClick添加以下redux-form api调用：

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