在這種情況下如何獲取復選框值和按鈕值？ 任何人都可以建議

Question

我想在 div rect1 中獲取“性別”復選框和“按鈕”的值，並對男性、女性和客戶、商店做出反應 2。 我怎樣才能得到它？ 我試圖gender == "male"或“女性”但它返回錯誤我需要改變什么？

function Register() {
  const [username,setUsername]= useState("");
  const [password,setPassword]= useState("");
  const [email,setEmail]= useState("");
  const [phone,setPhone]= useState("");
  const [gender,setGender]= useState("");
  const [role,setRole]= useState("");
  const [error, setError]= useState("");  
  let history = useHistory();
const register = (e) => {
  e.preventDefault();
  axiox.post("http://localhost:5001/api/auth/register", 
  {username,
  email,
  phone,
  password,
  gender,
  role,

    }).then((response)=> {
      console.log("response", response)
      localStorage.setItem("login", JSON.stringify({
     userLogin: true,
      token: response.data.access_token,
      }));
    setError("");
    setUsername("");

    setPassword("");
    setGender(");
    setRole"();
     history.push("/login");
    }).catch(error =>setError(error.response.data.message));
  };
    return (
        <input type="radio" name="gender" value={male} onChange={(e)=> setGender(e.target.value)}/>
        <label for="male"></label>
        <span>Male</span>
        <input type="radio" name="gender" value={female} onChange={(e)=> setGender(e.target.value)}/>
        <label for="female"></label>
        <span>Female</span>
    </div>
    <div class="rect1">
      <button class="button" type="button" value={shop} onChange={(e)=> setRole(e.target.value)}><img src={process.env.PUBLIC_URL + `/Images/shop 1.png`} /></button>
    </div>
    <div class="rect2">
      <button class="button" type="button" value={customer} onChange={(e)=> setRole(e.target.value)}> <img src={process.env.PUBLIC_URL + `/Images/take-away.png`} /></button>
 

謝謝你幫助我

Answer 1

將 state 更改為 boolean 稱其為isMale

const [isMale, setIsMale]=useState(false)

比成回報

        <input type="radio" name="gender" value={male} onChange={()=> 
        setGender(true)}/>
        <label for="male"></label>
        <span>Male</span>
        <input type="radio" name="gender" value={female} onChange={()=> setGender(false)}/>
        <label for="female"></label>
        <span>Female</span>