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

【问题标题】：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 的值而不是标签上的内容。
我无法更改单选按钮的名称属性，因为我一次只需要一个可以选择。（我也愿意接受其他方式来实现这一点）
预先感谢您的帮助。

【问题讨论】：

标签： javascript reactjs checkbox radio

【解决方案1】：

尝试像这样更改onClick：

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

【讨论】：

【解决方案2】：

<input type="radio" /> 元素没有任何值，这就是使用"on" 的原因。当为每个<input /> 提供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>

【讨论】：