日期选择器中的 onChange

Question

我正在使用 Material UI v0 中的 DatePicker。 为此，我创建了名为 DateField 的不同组件，它返回 DatePicker，如下所示：

  render() {
    return (
      <div>
        <DatePicker
          onChange={this.onChange}
          maxDate={this.state.maxDate}
          minDate={this.state.minDate}
          value={this.state.value}
        />
      </div>
    );
  }

对于 onChange 我已经这样做了：

this.onChange = this._onChange.bind(this);

函数定义如下：

_onChange(p,date){
  this.props.onChange(date);
  this.setState({ value: date });
}

现在我这样调用这个组件

<DateField
  onChange={(date)=>console.log(date)}
>

但是一旦我更改日期，DatePicker 的值就不会更新。

此外，当我从 DateField 中删除 onChange 属性时，我收到一个错误，即 this.props.onChange 不是函数，但值会显示在日期选择器中

不明白是什么问题

此外，当我在 redux 表单 Field 中使用 DateField 时，它可以完美运行，因为我认为在这种情况下 onChange 由 Field 传递

日期选择器：https://v0.material-ui.com/#/components/date-picker

Answer 1

将您的代码更改为：

render() {
    return (
      <div>
        <DatePicker
          onChange={this.props.onChange} //-- this line add props
          maxDate={this.state.maxDate}
          minDate={this.state.minDate}
          value={this.state.value}
        />
      </div>
    );
  }