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

Question

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

<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

，而不是标签上的内容。

我无法更改单选按钮的名称属性，因为我一次只需要选择一个。 （我也愿意接受其他方法来实现这一目标）。

Answer 1

尝试像这样改变

onClick

：

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

Answer 2

<input type="radio" />

元素没有任何值，这就是使用

"on"

的原因。当为每个

value

提供

<input />

属性时，您可以看到状态正确更新。

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

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>