javascript - react 最终形式我只想在所有字段都有效的情况下处理提交

Question

我已经使用react-final-form设置了联系表单。问题是我真的不明白如何仅在所有字段都有效时才允许提交表单。

现在，我的表单执行数据提取，并在字段为空或电子邮件地址无效时在字段下方显示错误。

作为我的react-final-form的基础，我使用了this sandbox中的代码。另外我不太明白 onSubmit 之间有什么区别在<Form/>和onSumbit在<form> 。

问题1:如何仅在所有字段都有效时才允许handleSubmit？

问题 2:两个 onSubmit 属性有什么区别？

这是我的代码:

import React from 'react';
import { Form, Field } from "react-final-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = async values => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

export class ContactPage extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit=this.handleSubmit.bind(this);
  }

handleSubmit(e) {
  e.preventDefault();
  console.log(this.firstName.value);

  //Setting up values for fetch body
  const firstName = this.firstName.value;
  const email = this.email.value;
  const subject = this.subject.value;
  const message = this.message.value;

  fetch('/contact/send', {
    method:'POST',
    headers:{
      'Accept':'application/json, text/plain, */*',
      'Content-Type':'application/json'
    },
    body:JSON.stringify({
      firstName:firstName,
      email:email,
      subject:subject,
      message:message,
    }),
  })
  .then(res=>res.json())
  .then(console.log('here'))
  .then(data=>console.log(data))
  .catch(err=>console.log(err));

//Cleaning up data from form
  this.firstName.value="";
  this.email.value="";
  this.subject.value="";
  this.message.value="";
};

 render() {
    return (
      <div className="contact">
        <div className="contact__form">
          <Form
      onSubmit={onSubmit}
      validate={values => {
        const errors = {};
        if (!values.firstName) {
          errors.firstName = "Required";
        }
        if (!values.subject) {
          errors.subject = "Required";
        }
        if (!values.email) {
          errors.email = "Required";
        } else if(!values.email.match( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
          errors.email = "Please enter a valid e-mail adress"
        }
        if (!values.message) {
          errors.message = "Required";
        }
        return errors;
      }}
      render={({ handleSubmit, submitting, values}) => (
        <form onSubmit={this.handleSubmit}>
          <Field name="firstName">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="text"
                  placeholder="Name"
                  ref={(ref) => {this.firstName = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="subject">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="text"
                  placeholder="Subject"
                  ref={(ref)=>{this.subject = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="email">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="email"
                  placeholder="E-mail"
                  ref={(ref) => {this.email = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="message">
            {({ input, meta }) => (
              <div>
                <textarea {...input}
                  type="text"
                  placeholder="Message"
                  ref={(ref) => {this.message = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
          </div>
        </form>
      )}
    />
          </div>
      </div>
    );
  }
}

export default (ContactPage);

Answer 1

您将直接在直接调用的组件上附加处理的handleSubmit，而不检查验证

您应该使用 <Form> 的 onSubmit 属性附加处理程序的组件，例如

 <Form onSubmit={this.handleSubmit}

这将被传递到 <form>组件作为handleSubmit，您可以用作

 <form onSubmit={this.handleSubmit}>

因此您的表单代码将如下所示:

<Form
      onSubmit={this.handleSubmit}
      validate={values => {
        const errors = {};
        if (!values.firstName) {
          errors.firstName = "Required";
        }
        if (!values.subject) {
          errors.subject = "Required";
        }
        if (!values.email) {
          errors.email = "Required";
        } else if(!values.email.match( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
          errors.email = "Please enter a valid e-mail adress"
        }
        if (!values.message) {
          errors.message = "Required";
        }
        return errors;
      }}
      render={({ handleSubmit, submitting, values}) => ( //handler gets passed here
        <form onSubmit={handleSubmit}> //don't use this. 
          <Field name="firstName">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="text"
                  placeholder="Name"
                  ref={(ref) => {this.firstName = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="subject">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="text"
                  placeholder="Subject"
                  ref={(ref)=>{this.subject = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="email">
            {({ input, meta }) => (
              <div>
                <input {...input}
                  type="email"
                  placeholder="E-mail"
                  ref={(ref) => {this.email = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="message">
            {({ input, meta }) => (
              <div>
                <textarea {...input}
                  type="text"
                  placeholder="Message"
                  ref={(ref) => {this.message = ref}}
                />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
          </div>
        </form>
      )}
    />

您的handleSumit不会接收事件参数，它会接收表单中的所有值作为参数，因此您可以将其更改为

handleSubmit(values){
console.log(values)
//You don't need the refs now
const firstName = values.firstName;
const email = values.email;
const subject = values.subject;
const message = values.message;

}