React 中的单选按钮选择

Question

我已成功选择了一个单选按钮。我的问题是我还想在标签中包含选择。标签/单词也应该是可点击的。

这是我的密码箱 CLICK HERE

 <RadioButton
    label="Food"
    name="radio"
    value="optionA"
    checked={select === "optionA"}
    handleChange={(event) => handleSelectChange(event)}
  />
  <RadioButton
    label="Water"
    name="radio"
    value="optionB"
    checked={select === "optionB"}
    handleChange={(event) => handleSelectChange(event)}
  />

Answer 1

只是这样的客户：https://codesandbox.io/s/react-styled-components-radio-button-forked-efxzd?file=/src/Radio.js:1554-1613

在应用程序中：

const handleSelectChange = (value) => {
  setSelect(value);
};

<RadioButton
  handleChange={handleSelectChange}
/>

而在RadioButton：

const handleChecked = () => {
  handleChange(value);
};

<Item onClick={handleChecked}>

Answer 2

只需在<label> 标签中包含单选按钮

   <label>
   <RadioButton
        label="Food"
        name="radio"
        value="optionA"
        checked={select === "optionA"}
        handleChange={(event) => handleSelectChange(event)}
      />
   </label>
      <label>
      <RadioButton
        label="Water"
        name="radio"
        value="optionB"
        checked={select === "optionB"}
        handleChange={(event) => handleSelectChange(event)}
      />
      </label>