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 Components的过时编码模式。

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值？

1 个答案: