Why when I use onClick with radio button make them have to click twice to make radio button to be se-CodePudding

now, I using radio button to render 2 components differently I use onClick with radio button to [isRepeat,setisRepeat] setState value

  <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>

and render component like this

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

but when I using onClick() with radio button, It's make user to click "twice" to make radio button checked

(actually, setState work fine when click radio button but radio button didn't be checked. It should be checked and setState at the same time to make user not confuse)

ps. I already using document.getElementByName('classType').value === 1 or 2 to render different items, but didn't work

CodePudding user response：

You should use onChange with input as:

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

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

CodePudding user response：

In the first input you have a typo. You have OnClick but you want onClick

It works for me with one click like this (I removed a few props to make it shorter)

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;

CodePudding user response：

You can use onChange instead of onClick handler and checked property along with it.

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