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

我有一个单选按钮列表，在一个表单中

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

所需品种（如有）
setBreed（e.target.value）}
/>
Goldendoodle
setBreed（e.target.value）}
/>
英语Goldendoodle

setBreed（e.target.value）}
/>
拉布拉多狗

setBreed（e.target.value）}
/>
狮子狗

setBreed（e.target.value）}
/>
其他
setBreed（e.target.value）}
/>
没有首选项

我想做的是将

bride

变量设置为选中的复选框的值。问题是我在上得到的是值，而不是标签上的内容
我无法更改单选按钮的“名称”属性，因为我一次只需要选择一个。（我也愿意用其他方法来实现这一点）

---

我提前感谢您的帮助。

尝试更改

onClick

，如下所示：

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

---

尝试更改

onClick

，如下所示：

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

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

”的原因。当为每个
提供
值
属性时，可以看到状态正确更新

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


函数应用程序（）{
const[breed，setBreed]=React.useState（null）；
原木（品种）；
返回(
所需品种（如有）
setBreed（e.target.value）}
/>
Goldendoodle
setBreed（e.target.value）}
/>
英语Goldendoodle

setBreed（e.target.value）}
/>
拉布拉多狗

setBreed（e.target.value）}
/>
狮子狗

setBreed（e.target.value）}
/>
其他
setBreed（e.target.value）}
/>
没有首选项
);
}
ReactDOM.render（，document.querySelector（“#root”）

元素
没有任何值，这就是使用“
上的
”的原因。当为每个
提供
值
属性时，可以看到状态正确更新

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


函数应用程序（）{
const[breed，setBreed]=React.useState（null）；
原木（品种）；
返回(
所需品种（如有）
setBreed（e.target.value）}
/>
Goldendoodle
setBreed（e.target.value）}
/>
英语Goldendoodle

setBreed（e.target.value）}
/>
拉布拉多狗

setBreed（e.target.value）}
/>
狮子狗

setBreed（e.target.value）}
/>
其他
setBreed（e.target.value）}
/>
没有首选项
);
}
ReactDOM.render（，document.querySelector（“#root”）