How to reset Rangepicker value from another components? - antd

Question

Version 2.11.2
I want to clear value at Rangepicker from other component e.g from clear button. I try to set the state but still doesn't work. How to do that?
This is my code :
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
};
}
....
doClear() {
this.setState({
startDate: null,
endDate: null,
});
}
render() {
return(
<div>
<RangePicker
format="YYYY-MM-DD"
placeholder={['Start Date', 'End Date']}
size="large"
defaultValue={[this.state.startDate, this.state.endDate]}
/>
<Button
className="ant-btn-lg"
onClick={this.doClear.bind(this)}
>Clear</Button>
</div>
)
}

Answer 1

You are only using the state for defaultValue, so changing state after the picker is initialized will have no effect. You should be applying the state to value instead.
And by the way, you are using out-of-date coding patterns for React Components.
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
};
}
can be replaced by just
state = {
startDate: null,
endDate: null,
}
and
doClear() {...}
render() {
return(
...
<Button ... onClick={this.doClear.bind(this)}>
...
)
}
should use ES6 arrow functions which properly handles this binding:
doClear = () => {...}
render() {
return(
...
<Button ... onClick={this.doClear}>
...
)
}