Question

你好，我正在使用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}
/>

Answer 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>
  )
}

清除redux表单字段（DatePicker）onclick'x'

1 个答案: