我无法将日期值从 react-dates 组件传递到其父组件。
首先,我通常会用 Redux 处理此类任务,但这对项目来说是多余的,并且希望使用简单的解决方案。
如何将onChange
中的DateRangePicker
个事件传递给它的父组件?
父组件
...
import DateRangePicker from './DatepickerRates'
class Rates extends Component {
constructor(props) {
super(props);
this.state = { }
}
onChange(startDate, endDate) {
this.setState({[startDate]: startDate});
this.setState({[endDate]: endDate});
}
render() {
console.log(`In ${this.state.startDate} - Out ${this.state.endDate}`)
return (
<Wrapper>
<DateRangePicker onChange={this.onChange.bind(this)}/>
</Wrapper>
);
}
}
export default Rates;
DateRangePicker
...
class DateRangePickerWrapper extends Component {
constructor(props) {
super(props);
this.state = {
focusedInput,
startDate: props.initialStartDate,
endDate: props.initialEndDate,
}
this.onDatesChange = this.onDatesChange.bind(this);
this.onFocusChange = this.onFocusChange.bind(this);
}
onDatesChange({ startDate, endDate }) {
const { stateDateWrapper } = this.props;
this.props.onChange('startDate', this.state.startDate);
this.props.onChange('endDate', this.state.endDate);
this.setState({
startDate: startDate && stateDateWrapper(startDate),
endDate: endDate && stateDateWrapper(endDate),
});
}
render() {
const { startDate, endDate } = this.state;
...
return (
<div>
<DateRangePicker
{...props}
onDatesChange={this.onDatesChange}
onFocusChange={this.onFocusChange}
focusedInput={focusedInput}
startDate={startDate}
endDate={endDate}
/>
</div>
);
}
}
export default DateRangePickerWrapper;
答案 0 :(得分:1)
这是工作示例-
在您的父组件上设置一个道具,例如
onChange={this.handleDropDownChange}
以及日期的子组件onChange中的onDatesChange和功能集this.props.onChange(startDate, endDate)
中,您将在handleDropDownChange()
中获得数据
答案 1 :(得分:0)
像这样将onChange函数作为道具传递给子组件
import DateRangePicker from './DatepickerRates'
class Rates extends Component {
constructor(props) {
super(props);
this.state = {
startDate: '',
endDate: '',
}
}
onChange = (startDate, endDate) => {
this.setState({
startDate: startDate,
endDate: endDate
});
}
render() {
...
return (
<Wrapper>
<DateRangePicker
onChange={this.onChange}/>
</Wrapper>
);
}
}
export default Rates;
然后从子组件中将onDatesChange函数修改为
onDatesChange({ startDate, endDate }) {
const { stateDateWrapper } = this.props;
console.log('startDate: ', startDate)
console.log('endDate: ', endDate)
this.props.onChange(startDate, endDate);
this.setState({
startDate: startDate && stateDateWrapper(startDate),
endDate: endDate && stateDateWrapper(endDate),
});
}
请注意,我已添加日志以检查您是否收到开始日期和结束日期值