将状态设置为单选按钮标签的值
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】:<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>
【讨论】:
以上是关于将状态设置为单选按钮标签的值的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?