Question

当服务器以200成功消息响应时，我试图找出如何重置表单字段。所有示例似乎都集中在提交成功时清除字段（无论服务器响应如何），但如果服务器有400响应，我不想清除字段。

在我的容器组件中，我有：

submit = (data) => {
  axios.post("/path/to/server", data)
    .then((response) => {
      //reset form somehow
    })
    .catch((err) => {
      //keep values in form and show error message
    })
}

我使用以下方式渲染表单：

<SubscribeForm onSubmit={this.submit} />

在我的演示组件中，我有：

let MyForm = props => {
  const { handleSubmit } = props;

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email Address:</label>
      <Field name="email" component="input" type="text"/>
      <input type="submit" value="Submit"/>
    </form>
  );
}

// Decorate the form component
MyForm = reduxForm({
  form: 'myForm',
})(MyForm);

Answer 1

在redux-form中，表单状态存储在redux商店中。因此，重置表单本质上是一种改变该状态的操作。

基于此，我将尝试找到一种方法将表单状态从the action creators that redux-form passes as props重置为装饰表单组件。方便的是，您会找到一个名为reset。

下一个挑战是如何从reset回调中发送onSubmit操作。从the docs开始，您可以看到onSubmit传递了三个参数：values，dispatch和props。这些很好地为我们提供了发送reset操作的工具。此外，您可以使用SubmissionError解决失败案例，这将确保在装饰表单组件中正确设置与错误相关的道具。例如：

submit = (values, dispatch, props) => {
  axios.post("/path/to/server", values)
    .then((response) => {
      //reset form somehow
      dispatch(props.reset())
    })
    .catch((err) => {
      //keep values in form and show error message
      return new SubmissionError({
        _error: 'Generic submission failed message here!'
      })
    })
}

希望这有帮助！

Answer 2

您可以使用“react refs”https://facebook.github.io/react/docs/refs-and-the-dom.html

如果您为表单组件添加了引用，则可以调用：

<form ref="formRef" onSubmit={handleSubmit}>
...

this.refs.formRef.reset();

您必须确保能够访问“this.refs”或进一步传递。

服务器响应后重置Redux-Form

2 个答案: