将状态设置为单选按钮标签的值

Posted

技术标签:

【中文标题】将状态设置为单选按钮标签的值【英文标题】:Setting state to be the value of the label of a radio button 【发布时间】:2021-06-16 04:05:08 【问题描述】:

我有一个表单中的单选按钮列表。

<h6>Desired breed (if any)</h6>
            <div className="radio container-fluid">
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">Goldendoodle</p>
              </label>
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">English Goldendoodle</p>
              </label>
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">Labradoodle</p>
              </label>
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">Poodle</p>
              </label>
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">Other</p>
              </label>
              <label>
                <input
                  type="radio"
                  className="checkbox"
                  name="Breed"
                  onClick=(e) => setBreed(e.target.value)
                />
                <p className="checkbox">No preference</p>
              </label>
             
            </div>
          </label>
        </div>

我要做的是将Breed 变量设置为选中的任何复选框的值。问题是我得到on 的值而不是标签上的内容。 我无法更改单选按钮的名称属性,因为我一次只需要一个可以选择。 (我也愿意接受其他方式来实现这一点) 预先感谢您的帮助。

【问题讨论】:

【参考方案1】:

尝试像这样更改onClick

onClick=(e) => setBreed(e.target.nextSibling.textContent)

【讨论】:

【参考方案2】:

&lt;input type="radio" /&gt; 元素没有任何值,这就是使用"on" 的原因。当为每个&lt;input /&gt; 提供value 属性时,您可以看到状态正确更新。

这还允许您将实际值与显示的标签分开。例如,假设您的界面支持多种语言。在这种情况下,您将为每种语言使用不同的标签,但值将保持不变。

function App() 
  const [breed, setBreed] = React.useState(null);
  
  console.log(breed);

  return (
    <div>
      <h6>Desired breed (if any)</h6>
      <div className="radio container-fluid">
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="Goldendoodle"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">Goldendoodle</p>
        </label>
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="English Goldendoodle"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">English Goldendoodle</p>
        </label>
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="Labradoodle"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">Labradoodle</p>
        </label>
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="Poodle"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">Poodle</p>
        </label>
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="Other"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">Other</p>
        </label>
        <label>
          <input
            type="radio"
            className="checkbox"
            name="Breed"
            value="No preference"
            onClick=(e) => setBreed(e.target.value)
          />
          <p className="checkbox">No preference</p>
        </label>
      </div>
    </div>
  );


ReactDOM.render(<App />, document.querySelector("#root"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】:

以上是关于将状态设置为单选按钮标签的值的主要内容,如果未能解决你的问题,请参考以下文章

PHP将数据库的值赋给单选按钮

使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?

在 vue 组件上提交表单时如何获取值单选按钮?

如何用图像替换单选按钮? [复制]

将 django 表单中的布尔模型字段显示为单选按钮而不是默认复选框

跪求:在ASP中单选按钮怎么用FOR语句输出