在ReactJS中，单选按钮呈现

import React, { useState } from 'react';

function RadioButton() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        Option 2
      </label>
    </div>
  );
}

export default RadioButton;

import React, { useRef } from 'react';

function RadioButton() {
  const selectedOptionRef = useRef(null);

  const handleButtonClick = () => {
    console.log(selectedOptionRef.current.value);
  };

  return (
    <div>
      <label>
        <input type="radio" name="option" value="option1" ref={selectedOptionRef} />
        Option 1
      </label>
      <label>
        <input type="radio" name="option" value="option2" ref={selectedOptionRef} />
        Option 2
      </label>
      <button onClick={handleButtonClick}>Get Selected Option</button>
    </div>
  );
}

export default RadioButton;

import React, { useState } from 'react';
import { Radio } from 'antd';

function RadioButton() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <Radio.Group onChange={handleOptionChange} value={selectedOption}>
      <Radio value="option1">Option 1</Radio>
      <Radio value="option2">Option 2</Radio>
    </Radio.Group>
  );
}

export default RadioButton;