将组件状态传递给redux-form

Question

I am using react-day-picker with multi day select http://react-day-picker.js.org/examples/selected-multiple .

My question: Is it possible to pass state of this component:

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

to redux-form state ??

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

Answer 1

In your custom MultiDayPicker component you have to call redux-form input.onChange method.

So in order to change the redux-form state, when your MultiDayPicker value is changed, you have to add the following redux-form api call in handleDayClick :

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

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

Also you have to think about the rest redux-form input properties and callbacks and decide for which ones to add support. Here's the full list .

Answer 2

I've never used the DayPicker, but i've used DayPickerInput, if you can it instead of DayPicker, you can simply put inside DayPickerInput inputProps={{...this.props.input}} as inputProps is defined as additional props to add to the input component.

Redux Form need to find the input name inside of the field you pass from Field to bind the value.

You should also use onDayChange instead of onDayClick i guess.

Code:

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

You can find more information here: DayPickerInput: inputProps