Передать состояние компонента в redux-форму - PullRequest
0 голосов
/ 07 июня 2018

Я использую react-day-picker с многодневным выбором http://react -day-picker.js.org / examples / selected-multip .

Мой вопрос: возможно липередать состояние этого компонента:

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}
/>

Ответы [ 2 ]

0 голосов
/ 27 июля 2018

Я никогда не использовал DayPicker, но я использовал DayPickerInput, если вы можете сделать это вместо DayPicker, вы можете просто поместить в DayPickerInput inputProps={{...this.props.input}}, поскольку inputProps определяется как дополнительные реквизиты для добавления к компоненту ввода.

Форма Redux должна найти имя входа внутри поля, которое вы передаете из поля, чтобы связать значение.

Вы также должны использовать onDayChange вместо onDayClick, я думаю.

Код:

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

Вы можете найти больше информации здесь: DayPickerInput: inputProps

0 голосов
/ 07 июня 2018

В пользовательском компоненте MultiDayPicker необходимо вызвать метод redux-form input.onChange.

Таким образом, чтобы изменить состояние redux-form, при изменении значения MultiDayPicker у вас естьЧтобы добавить следующий redux-form вызов API в handleDayClick:

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

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

Также вы должны подумать об остальных redux-form входных свойствах и обратных вызовах и решить, для каких из них добавить поддержку. Вот полный список .

...