用useState处理多个单选按钮组

import React, { useState } from 'react';

function RadioButtonGroup() {
  const [group1, setGroup1] = useState('option1');
  const [group2, setGroup2] = useState('optionA');

  const handleGroup1Change = (event) => {
    setGroup1(event.target.value);
  };

  const handleGroup2Change = (event) => {
    setGroup2(event.target.value);
  };

  return (
    <div>
      <h2>Group 1</h2>
      <label>
        <input
          type="radio"
          value="option1"
          checked={group1 === 'option1'}
          onChange={handleGroup1Change}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={group1 === 'option2'}
          onChange={handleGroup1Change}
        />
        Option 2
      </label>

      <h2>Group 2</h2>
      <label>
        <input
          type="radio"
          value="optionA"
          checked={group2 === 'optionA'}
          onChange={handleGroup2Change}
        />
        Option A
      </label>
      <label>
        <input
          type="radio"
          value="optionB"
          checked={group2 === 'optionB'}
          onChange={handleGroup2Change}
        />
        Option B
      </label>
    </div>
  );
}

export default RadioButtonGroup;