为什么当我将 onClick 与单选按钮一起使用时，他们必须单击两次才能选择单选按钮？答案

【问题标题】：Why when I use onClick with radio button make them have to click twice to make radio button to be selected?为什么当我将 onClick 与单选按钮一起使用时，他们必须单击两次才能选择单选按钮？
【发布时间】：2022-02-14 01:39:28
【问题描述】：

现在，我使用单选按钮以不同方式呈现 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，以免用户混淆）

ps。我已经使用document.getElementByName('classType').value === 1 or 2 渲染不同的项目，但没有工作

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您应该使用 onChange 和 input 作为：

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

而不是onClick

Demo

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>
  );
}

【讨论】：

谢谢！，它已经工作了。起初它没有工作，直到我发现我的组件也有问题，所以我修复了组件的东西，然后用你的解决方案修复了收音机。

【解决方案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>
);
}

Demo

【讨论】：

【解决方案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;

【讨论】：