Javascript 如何在react中检查表单的整个状态，以便启用禁用的按钮submit

我在react中有一个onChange事件，它正在正确填充状态。当提交时有空字段时，我将禁用表单按钮。但是，我希望他们能够返回并填写该字段，或者两个字段（这是关键的症结所在），如果两个字段都有一些数据，可以再次启用表单

这是我的状态

const [formState, setFormState] = React.useState({
    name: "",
    package: `${data.datoCmsPricing.title}`,
    email: "",
    subject: "",
    message: "",
    "reasons": {
      "weightLoss": false,
      "strength": false,
      "sport": false,
   }
  })

这是我的onChange，目前正在进行名称验证，我只能针对所选的输入。我想在更改事件中检查整个表单状态是否为空，然后启用按钮。

const onChange = (e) => {
    if (e.target.type === 'checkbox') {

      const changedReason = e.target.getAttribute('name');
      setFormState({...formState, reasons:{...formState.reasons, [changedReason]: !formState.reasons[changedReason]}});
      //setFormState({...formState, [e.target.name]: e.target.checked});
      console.log(formState);
    } else {
        setFormState({...formState, [e.target.name]: e.target.value });

    }

    //name validation  
    if (e.target.name.value === "") {
      setShowMessageName(true)
      setFormInvalid(false)

    }
    else{
      setShowMessageName(false)
      setFormInvalid(true)
    }

 }

这是我的表单验证状态

//Form Errors and Hiding and Showing


const [form, setForm] = useState(true);

function showForm(e) {
    e.preventDefault();
    setForm(true);
}

const [formFail, setFormFail] = useState(true);

function formFailReset(e){
  e.preventDefault();
  setFormFail(true);
}

const [formInvalid, setFormInvalid] = useState(true);

function formInactive(){

}

// const [nameVal, setNameVal] = useState(false);


const [showMessageName, setShowMessageName] = useState(false)

const [showMessageEmail, setShowMessageEmail] = useState(false)

//End

这是我的申请

 const submitForm = async (e) => {
  e.preventDefault();

  //name validation  
  if (e.target.name.value === "") {
    setShowMessageName(true)
    setFormInvalid(false)

  }
  else{
    setShowMessageName(false)
    setFormInvalid(true)
  }
  //email validation
  if (e.target.email.value === "") {
    setShowMessageEmail(true)
  }
  else{
    setShowMessageEmail(false)
  }

  ...

这是我的表格

<PackageForm onChange={formOnChange} onSubmit={submitForm}>
      {/* <input type="text" name="package" value={data.datoCmsPricing.title} /> */}
      <label>
        <h3>Name{ showMessageName && <span> *Required</span>}</h3>     
        <input
          type="text"
          name="name"
          value={formState.name}
          onChange={onChange}
        />
      </label>
      <label>
        <h3>Email{ showMessageEmail && <span> *Required</span>}</h3>
        <input
          type="email"
          name="email"
          value={formState.email}
          onChange={onChange}
        />
      </label>
      <label>
        <h3>Subject</h3>
        <input
          type="text"
          name="subject"
          value={formState.subject}
          onChange={onChange}
        />
      </label>
      <div>
      <h3>Reasons for wanting to train</h3>
      <CheckBoxes>

        <label>
        <h4>Weight Loss</h4>
        <div class="pretty p-default">
          <input 
            type="checkbox"
            name="weightLoss"
            reason="Weight Loss"
            checked={formState.reasons.weightLoss}
            onChange={onChange}
          />
          <div class="state p-primary">
            <label></label>
          </div>
        </div>

        </label>
        <label>
        <h4>Strength</h4> 
        <div class="pretty p-default">
          <input 
            type="checkbox"
            name="strength"
            reason="Strength"
            checked={formState.reasons.strength}
            onChange={onChange}
          />
          <div class="state p-primary">
            <label></label>
          </div>
        </div>

        </label>
        <label>
        <h4>Sport</h4> 
        <div class="pretty p-default">
          <input 
          type="checkbox"
          name="sport"
          reason="Sport"
          checked={formState.reasons.sport}
          onChange={onChange}
        />
        <div class="state p-primary">
            <label></label>
          </div>
        </div>

        </label>
      </CheckBoxes>
      </div>

      <div className="text-area">
        <label>
          <h3>Message</h3>
          <textarea
            name="message"
            value={formState.message}
            onChange={onChange}
          />
        </label>
      </div>

      {formFail ? 
        <label className= {formInvalid ? `submitHand` : `submitHand fail`}  >

          {formInvalid ? 
            <button type="submit">Submit</button>
          :
            <button disabled type="submit">See Required Fields</button>
          }

        </label>

      :
      <label className="submitHand fail">
        <span>Something Went Wrong</span>
        <a onClick={formFailReset} href="#">Click to reset form</a>
        <button disabled type="submit">Submit</button>
      </label>

      }


    </PackageForm>

我目前拥有的不起作用，因为它一次只检查一个输入，而不是每个输入1、2、3、4或电子邮件、姓名

const onChange = (e) => {

    //name validation  
    if (e.target.name.value === "") {
      console.log("keep button disabled");

    }
    else{
      console.log("enable button");
    }

 }

---

您应该使用状态来检查验证。这样，您可以一次访问所有表单数据。例如：

const checkValidation = () => {
  const required = ['email','subject','message'];
  const invalid = required.some(key => formState[key] === '')
  setShowMessageName(!invalid)
  setFormInvalid(invalid)
}

因此，您可以在onChange中检查验证

const onChange = (e) => {
    if (e.target.type === 'checkbox') {

      const changedReason = e.target.getAttribute('name');
      setFormState({...formState, reasons:{...formState.reasons, [changedReason]: !formState.reasons[changedReason]}});
      //setFormState({...formState, [e.target.name]: e.target.checked});
      console.log(formState);
    } else {
        setFormState({...formState, [e.target.name]: e.target.value });

    }

    //name validation  
    checkValidation();
 }

---

这是你的问题吗？

请创建一个最小的示例，因为这段代码太过全面，子孙后代无法从中受益哦，伙计，这就是我要做的，然后我想我会因为解释得不够好而被停职。让我添加一个最小的示例排序有助于简化我所做的工作，但问题是当一个输入有效或已填充时，它仍会启用按钮。其中，我只想在所有输入有效或已填充或未填充时启用该按钮！空的。我将更多地修改你的代码。如果我不检查键，而是抓取整个formState，并为每个字段编写带有

&&

septor的If语句，我认为它会工作。它应该只在required中没有一个字段为空时设置有效性。我的解决方案只是验证应该如何工作的一个示例。我希望这是一个良好的起点。

const onChange = (e) => {
    if (e.target.type === 'checkbox') {

      const changedReason = e.target.getAttribute('name');
      setFormState({...formState, reasons:{...formState.reasons, [changedReason]: !formState.reasons[changedReason]}});
      //setFormState({...formState, [e.target.name]: e.target.checked});
      console.log(formState);
    } else {
        setFormState({...formState, [e.target.name]: e.target.value });

    }

    //name validation  
    checkValidation();
 }