javascript - 在 Redux/React 中设置/清除输入

Question

我想知道在使用 React 时如何通过 redux 在一个清晰的字段中进行连接。例如，我有一个带有一些示例代码的表单。

 <Field component={datewidget} id ="date" name="date" type="date" label="date" />
 <button type="button"onClick={() => {(clearMyInput());}}>
</button>

函数clearMyInput的调度如下:

const mapDispatchToProps = (dispatch) => {
  return {
    clearMyInput: () => {
      return dispatch(clearDate(datedata,value));
    }
  }
}

我的问题是如何通过简单地单击按钮并将输入值设置为无来清除输入字段。

例如在jquery中，我可以写这样的东西:

$("#button").click(function () {
    $("#date").val("");
});

我想知道如何在 React 中使用 redux 表单来做到这一点。

Answer 1

在您的 Field 组件中，从您的存储传递属性 value 并附加事件处理程序以分派(dispatch)更改。

<Field 
  component={datewidget} 
  id="date" 
  name="date" 
  type="date" 
  label="date"
  value={this.props.fieldValue}
  onChange={this.props.changeFieldValue}
/>

然后通过调度 clearDate 函数，您只需将所有表单的值设置为 '' 即可。我建议查看Redux Form这一切都无需样板即可完成。