在 React 中驗證所有表單輸入之前禁用按鈕

Question

我的代碼中有這個表單，我想在檢查所有驗證和模式后啟用表單按鈕，但我不知道如何將它放入我的表單中，或者我是否需要編寫任何其他函數哪種方式是最干凈的代碼？

const [disable, setDisable] = React.useState(true);

  const [staff, setStaff] = React.useState({
    username: "",
    email: "",
    phone: "",
    password: "",
  });

  const [errMessage, setErrMessage] = React.useState({
    username: "",
    email: "",
    phone: "",
    password: "",
  });

const handleChange = (e) => {
    switch (e.target.name) {
      case "email": {
        if (e.target.value.toLowerCase().match(emailValidation)) {
          setErrMessage({ ...errMessage, email: "" });
          setStaff({ ...staff, email: e.target.value });
        } else {
          setErrMessage({
            ...errMessage,
            email: "It should be a valid email address",
          });
        }
      }
      case "password": {
        if (e.target.value.length >= 12) {
          setErrMessage({ ...errMessage, password: "" });
          setStaff({ ...staff, password: e.target.value });
        } else {
          setErrMessage({
            ...errMessage,
            password: "It should be at least 12 character",
          });
        }
      }
      default:
        setStaff({
          ...staff,
          [e.target.name]: e.target.value,
        });
    }
  };

return( <button disabled={disable}>Submit</button>)

Answer 1

由於您正在跟蹤該errMessage state 中的錯誤，因此您不需要額外的 state 來disable 。 它可以是一個簡單的常量，您可以在handleChange之上和之外添加：

const disable =
  Object.values(errMessage).filter((v) => v).length > 0 ||
  Object.values(staff).filter((v) => v).length !== 4;

<button disabled={disable}>Submit</button>

這樣，當出現錯誤消息或一個字段為空時，該按鈕將被禁用。