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-form中添加以下handleDayClick 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

2 个答案: