我要處理的最終形式的反應最終形式只有在所有字段均有效時才提交

Question

我已經設置了帶有react-final-form的聯系表單。 問題是我僅在所有字段均有效時才真正理解如何允許提交表單。

現在，我的表單會進行數據提取，並在字段為空或電子郵件地址無效時在字段下方顯示錯誤。

作為我的react-final-form的基礎，我使用了此沙箱中的代碼。 我也不太了解<Form/> onSubmit和<form> onSumbit什么區別。

問題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}

這將作為handleSubmit傳遞到<form>組件，您可以將其用作

 <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;

}