為什么當我將 onClick 與單選按鈕一起使用時，它們必須單擊兩次才能選中單選按鈕？

Question

現在，我使用單選按鈕以不同方式呈現 2 個組件我使用 onClick 和單選按鈕到[isRepeat,setisRepeat] setState值

  <input
     required
     id="singleClass"
     name="classType"
     type="radio"
     className="inputContainer"
     value={1}
     OnClick={() => setisRepeat("oneTime")}
     ></input>

     <label>ครั้งเดียว</label>
   <input
     required
     id="repeatClass"
     name="classType"
     type="radio"
     className="inputContainer"
     value={2}
     onClick={() => setisRepeat("repeat")}
     ></input>

並像這樣渲染組件

    {isRepeat === "oneTime" && (
        <>...</>
    )}
    {isRepeat === "repeat" && (
        <div>...</div>
    )}

但是當我將onClick()與單選按鈕一起使用時，它會讓用戶點擊“兩次”來選中單選按鈕

（實際上，單擊單選按鈕時setState工作正常，但沒有選中單選按鈕。應該同時選中和設置狀態， setState用戶混淆）

附言。 我已經使用document.getElementByName('classType').value === 1 or 2來渲染不同的項目，但沒有用

Answer 1

您應該將onChange與input一起使用：

onChange={() => setisRepeat("oneTime")}

而不是onClick

演示

export default function App() {
  const [isRepeat, setisRepeat] = useState(""); // You can also give the initial value

  return (
    <div>
      <input
        required
        id="singleClass"
        name="classType"
        type="radio"
        className="inputContainer"
        value={1}
        onChange={() => setisRepeat("oneTime")}
      ></input>

      <label>ครั้งเดียว</label>
      <input
        required
        id="repeatClass"
        name="classType"
        type="radio"
        className="inputContainer"
        value={2}
        onChange={() => setisRepeat("repeat")}
      ></input>

      <br />

      {isRepeat === "oneTime" && <> One Time </>}
      {isRepeat === "repeat" && <div> Repeat </div>}
    </div>
  );
}

Answer 2

您可以使用 onChange 而不是 onClick 處理程序和檢查屬性。

import { useState } from "react";

export default function App() {
const [isRepeat, setisRepeat] = useState("");
const onClickHandler = (type) => {
  if (type === "singleClass") {
     setisRepeat("singleClass");
  } else {
     setisRepeat("repeatClass");
  }
};
return (
<div className="App">
  <input
    required
    name="singleClass"
    type="radio"
    className="inputContainer"
    value={1}
    checked={isRepeat === "singleClass"}
    onChange={() => {
      onClickHandler("singleClass");
    }}
  ></input>

  <label>ครั้งเดียว</label>
  <input
    required
    name="repeatClass"
    type="radio"
    className="inputContainer"
    value={2}
    checked={isRepeat === "repeatClass"}
    onChange={() => {
      onClickHandler("repeatClass");
    }}
  ></input>
  {isRepeat === "singleClass" && (
    <>
      <p>One time component Triggered </p>
    </>
  )}
  {isRepeat === "repeatClass" && <div>Repeat component Triggered </div>}
</div>
);
}

演示

Answer 3

在第一個輸入中你有一個錯字。 你有OnClick但你想要onClick

像這樣單擊一下對我有用（我刪除了一些道具以使其更短）

import React from 'react';
import { useState } from 'react';

const Demo = () => {
  const [isRepeat, setIsRepeat] = useState('');
  return (
    <>
      <input type="radio" value={1} onClick={() => setIsRepeat('oneTime')}></input>

      <label>ครั้งเดียว</label>
      <input type="radio" value={2} onClick={() => setIsRepeat('repeat')}></input>

      {isRepeat === 'oneTime' && <span>One Time</span>}
      {isRepeat === 'repeat' && <span>repeat</span>}
    </>
  );
};
export default Demo;