reactjs - 如何在条件下激活按钮

Question

const Login = () => {
  const [ID, setID] = useState();
  const [PW, setPW] = useState();
  function handleIdInput(event) {
    setID(event.target.value);
    console.log(ID);
  }
  function handlePWInput(event) {
    setPW(event.target.value);
    console.log(PW);
  }
  <form>
    <div>
      <input type="text" id="ID" className="boxes" onChange={handleIdInput} />
    </div>
    <div>
      <input
        type="password"
        id="password"
        className="boxes"
        onChange={handlePWInput}
      />
    </div>

    <button className="boxes" type="button" onClick={goList}>
      LogIn
    </button>
  </form>;
};

如果 id 包含 @ 并且密码至少有 7 个字符，我想激活按钮。我试图找到一种不使用类和这种方法的方法。谢谢!

Answer 1

请使用disabled属性。

 <button className='boxes' type='button' onClick={goList} disabled={()=> checkDisabled(ID, PW)}>
   LogIn
 </button>

checkDisabled 函数必须根据您的要求返回 true 或 false。

const checkDisabled = (id, password) => {
 // condition here
 if(id.includes('@') && password.length >= 7)
 {
    return false;
 }
 
 return true;
}

那么最终的组件代码必须是这样的。请注意我所做的更改与状态变量如何与 input 组件连接有关。

import { useState } from "react";

const Login = () => {
  const [ID, setID] = useState("");
  const [PW, setPW] = useState("");

  function handleIdInput(event) {
    setID(event.target.value);
    console.log(ID);
  }

  function handlePWInput(event) {
    setPW(event.target.value);
    console.log(PW);
  }

  const checkDisabled = (id, password) => {
    // condition here
    if (id.includes("@") && password.length >= 7) {
      return false;
    }
    return true;
  };

  return (
    <form>
      <div>
        <input
          type="text"
          id="ID"
          className="boxes"
          value={ID}
          onChange={(e) => handleIdInput(e)}
        />
      </div>
      <div>
        <input
          type="password"
          id="password"
          className="boxes"
          value={PW}
          onChange={(e) => handlePWInput(e)}
        />
      </div>

      <button
        className="boxes"
        type="button"
        onClick={goList}
        disabled={() => checkDisabled(ID, PW)}
      >
        LogIn
      </button>
    </form>
  );
};

export default Login;

引用useState hook .