时间戳

首页 > 解决方案 > 清除 redux 表单字段 (DatePicker) onclick 'x'

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

问题描述

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

标签： javascriptreactjsreduxredux-form

解决方案

看起来这redux-form-material-ui并没有完全公开操纵字段值的能力。但是，它确实提出了一种通过 refs 挖掘孩子们的方法。

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

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

这是库中的DatePicker源代码material-ui（似乎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>
  )
}

推荐阅读