【问题标题】:Radio Button Selection in ReactReact 中的单选按钮选择
【发布时间】: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)}
  />

【问题讨论】:

    标签: css reactjs react-hooks styled-components


    【解决方案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}>
    

    【讨论】:

    【解决方案2】:

    只需在&lt;label&gt; 标签中包含单选按钮

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

    【讨论】:

      猜你喜欢
      • 2021-10-28
      • 1970-01-01
      • 1970-01-01
      • 2017-07-24
      • 1970-01-01
      • 2011-09-22
      • 1970-01-01
      相关资源
      最近更新 更多