我在多日期选择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}
/>
在自定义的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
输入属性和回调,并确定要添加哪些支持。 这是完整列表 。
我从未使用过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