如何在提交时重置输入表单（ReactJS）[重复]

Posted 2021-05-06

这个问题在这里已有答案：

• React - clearing an input value after form submit 4个答案

我在输入表单重置提交时遇到了一些困难。我希望输入字段在表单成功提交时重置为空白值，但暂时我也很好，只是重置onSubmit一般，到目前为止我都没有弄清楚。具体来说，我尝试的是：

 class SubscribeForm extends React.Component {
  constructor(props, ...args) {
    super(props, ...args)
    this.state = {
      status: null,
      msg: null,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
  event.preventDefault();
  this.setState({ value: '' });
}

使用表单布局：

<form onSubmit={this.handleSubmit} action={action} method="post" id="alert-form" noValidate>

                <input
                  ref={node => (this.input = node)}
                  type="email"
                  defaultValue=""
                  name="EMAIL"
                  required={true}
                  placeholder={messages.inputPlaceholder}
                />
                <button
                  disabled={this.state.status === "sending" || this.state.status === "success"}
                  onClick={this.onSubmit}
                  type="submit"
                  className="btn-group"
                  id="AlertButton"
                >
                  <p>Sign Up</p>
                </button>
                  </form>

但是，在实际单击按钮时，在表单的onSubmit prop中调用{this.handleSumbit}似乎没有任何结果。这里有什么明显的遗漏或是一个更复杂的问题吗？

以下是完整的相关代码段：

class SubscribeForm extends React.Component {
  constructor(props, ...args) {
    super(props, ...args)
    this.state = {
      status: null,
      msg: null,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
  event.preventDefault();
  this.setState({ value: '' });
}

  onSubmit = e => {
    e.preventDefault()
    if (!this.input.value || this.input.value.length < 5 || this.input.value.indexOf("@") === -1) {
      this.setState({
        status: "error"
      })
      return
    }
    const url = getAjaxUrl(this.props.action) + `&EMAIL=${encodeURIComponent(this.input.value)}`;
    this.setState(
      {
        status: "sending",
        msg: null
      }, () => jsonp(url, {
        param: "c"
      }, (err, data) => {
        if (err) {
          this.setState({
            status: 'error',
            msg: err
          })
        } else if (data.result !== 'success') {
          this.setState({
            status: 'error',
            msg: data.msg,
          })

        } else {
          this.input.defaultValue = "";
          this.setState({
            status: 'success',
            msg: data.msg,
            inputPlaceholder: "E-mail"
          })
        }
      })
    )
  }
  render() {
    const { action, messages, className, style, styles } = this.props
    const { status, msg } = this.state
    return (
      <div className={className} style={style}>
        <form onSubmit={this.handleSubmit} action={action} method="post" id="alert-form" noValidate>

            <input
              ref={node => (this.input = node)}
              type="email"
              defaultValue=""
              name="EMAIL"
              required={true}
              placeholder={messages.inputPlaceholder}
            />
            <button
              disabled={this.state.status === "sending" || this.state.status === "success"}
              onClick={this.onSubmit}
              type="submit"
              className="btn-group"
              id="AlertButton"
            >
              <p>Sign Up</p>
            </button>
              </form>

      </div>
    )
  }
}

答案

您可以使SubscribeForm成为受控组件。 https://reactjs.org/docs/forms.html

这意味着添加一个更新this.state.value的onChange，并将输入字段的值设置为this.state.value。

如果你这样做，你的setState({value: ''})将导致表单的渲染，其值设置回空字符串。

它创建了双向绑定。更新输入字段时，组件状态也是如此。更新组件状态时，输入字段也是如此。

由于您使用的是onSubmit，因此您可以从事件中获取输入字段。像event.target.elements.EMAIL.value = ''之类的东西。我更喜欢使用你在那里的参考。

另一答案

试试这个

handleSubmit(event) {
    event.preventDefault();
    this.input.value = '';
    this.setState({ value: '' });
}

https://codepen.io/va0000ll/pen/zRXNwY