清除 redux 表单字段 (DatePicker) onclick 'x'

【问题标题】：Clear redux form field (DatePicker) onclick 'x'清除 redux 表单字段 (DatePicker) onclick 'x'
【发布时间】：2018-12-21 12:34:03
【问题描述】：

您好，我正在使用来自 redux-form-material-ui 的 DatePicker，但我无法清除该字段 - 使用我在此处描述的这个组件无法做到这一点： https://github.com/erikras/redux-form-material-ui/issues/262 因此，我想在右侧的字段上添加“x”按钮，然后单击它应该清除该字段......我该怎么做？如何访问方法中的字段？

<Field
   name="dateOfBirth"
   type="text"
   component={DatePicker}
   className={css.fullWidth}
   fullWidth
   formatDate={formatDate}
/>

【问题讨论】：

最好使用来自 'react-bootstrap-datetimerangepicker' 的 DatetimeRangePicker ，您可以轻松地处理清除使用状态。
但我不想要日期范围，只选择一个日期，并希望它与 redux 表单完美配合。
能把你的codecodeandbox放上来分享一下

标签： javascript reactjs redux redux-form

【解决方案1】：

看来redux-form-material-ui 并没有完全公开操纵字段值的能力。但是，它确实为dig into the children via refs 提供了一种方法。

在你的情况下，它看起来像：

handleClick() {
    this.refs.dobField          // the Field
      .getRenderedComponent()   // on Field, returns ReduxFormMaterialUIDatePicker
      .getRenderedComponent()   // on ReduxFormMaterialUIDatePicker, returns DatePicker
      .setState({ date: null}); // on DatePicker
}

这是来自material-ui 库的DatePicker source code（看来redux-form-material-ui 使用的是0.x 版本，而不是1.x）。

假设你有：

render() {
  return (
    <form>
      ...
      <Field name="dateOfBirth"
             type="text"
             component={DatePicker}
             className={css.fullWidth}
             fullWidth
             formatDate={formatDate}
             withRef // enable the option
             ref="dobField" // name of ref; redux-form-material-ui makes it accessible via this.refs.dobField
/>
      ...
    </form>
  )
}

【讨论】：