如何从其他组件重置 Rangepicker 值？

Question

版本 2.11.2

我想从其他组件（例如清除按钮）清除 Rangepicker 的值。我尝试设置状态但仍然不起作用。怎么做？

这是我的代码：

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

您只使用了 defaultValue 的状态，因此在选择器初始化后更改状态不会有任何效果。您应该将状态应用于 value。

顺便说一句，您使用的是过时的 React 组件编码模式。

constructor(props) {
  super(props);
  this.state = {
     startDate: null,
     endDate: null,
  };
}

可以换成

  state = {
     startDate: null,
     endDate: null,
  }

和

doClear() {...}

render() {
  return(
      ...
      <Button ... onClick={this.doClear.bind(this)}>
      ...
  )
}

应该使用正确处理 this 绑定的 ES6 箭头函数：

doClear = () => {...}

render() {
  return(
      ...
      <Button ... onClick={this.doClear}>
      ...
  )
}

如何从其他组件重置 Rangepicker 值？

How to reset Rangepicker value from another components?

antd