Redux表单,单选按钮字段,如何支持变量值? [英] Redux Form, Radio Button Fields, how to support variable values?
问题描述
在我的React Redux表单中,我有以下内容:
In my react redux form, I have the following:
<fieldset className="form-group">
<legend>Radio buttons</legend>
{this.props.job_titles.map(jobTitle => (
<div className="form-check" key={jobTitle.id}>
<label className="form-check-label">
<Field
name="job_title_id"
component="input"
type="radio"
value={jobTitle.id}
/>
{' '}
{jobTitle.title}
</label>
</div>
))}
</fieldset>
这将正确呈现单选按钮,但是当您单击以选择单选按钮时,单选按钮将永远不会设置为选中状态.您无法选择一个选项-表单已损坏.
This renders the radio buttons correctly, but when you click to select a radio button, the radio button never sets as selected. You can't select an option - the form is broken.
奇怪的是,如果我将value={jobTitle.id}
更新为value="anything"
,则可以选择单选按钮.
What's strange is if I update: value={jobTitle.id}
to value="anything"
then the radio buttons can be selected.
在redux表单文档中我没有看到有关动态生成的单选按钮的任何内容.我在做什么错了?
I'm not seeing anything in the redux form docs about radio buttons dynamically generated. What am I doing wrong?
谢谢
推荐答案
将选中的属性设置为state
或prop
,然后在点击处理程序中对其进行更新.
Set the checked property to a state
or prop
, then update that in the click handler.
<Field
onClick={
() => {
this.setState((prevState) => {
return {isChecked: !prevState.isChecked};
});
}
}
name="job_title_id"
component="input"
type="radio"
checked={this.state.isChecked}
value={jobTitle.id}
/>
这篇关于Redux表单,单选按钮字段,如何支持变量值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!