React 中的单选按钮选择

Posted 2023-03-15

【中文标题】React 中的单选按钮选择

【英文标题】：Radio Button Selection in React

【发布时间】：2021-10-28 02:02:10

【问题描述】：

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

这是我的密码箱 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)
  />

【参考方案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>

【讨论】：

我添加了一个表单。我想用它来使用formik。你能帮我修一下吗？ codesandbox.io/s/…

请详细说明其他问题

嗨，越南。我可以在这方面寻求帮助吗？ codesandbox.io/s/buttons-changing-w8bt8?file=/src/Table/…

【参考方案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>