我有一个 redux 表单,其中包含一些单选按钮:
<label htmlFor="passType">Pass type</label>
{passType.touched && passType.error && <span className="error">{passType.error}</span>}
<br />
<input
type="radio"
{...passType}
id="passType"
value="0"
checked={passType.value === '0'}
/> VIP<br />
<input
{...passType}
type="radio"
id="passType"
value="1"
checked={passType.value === '1'}
/> Regular<br />
一切都很好,但现在传递类型必须从状态动态生成:
PassTypes":[{"Id":1,"姓名":"VIP"},{"Id":2,"姓名":"普通"}]
这不起作用:
const renderPassTypes = passTypes => passTypes.map((passType, i) =>
(
<input
type="radio"
{...passType}
id="passType"
value={passType.Id}
checked={passType.Id === ?!?!?}
/> {passType.Value}<br />
)
我应该如何从一个对象编码一组单选按钮?
我还有一个验证器也需要继续运行:
const sendInviteValidator = createValidator({
passType: required,
});
你尝试过的似乎不错。
render() {
// Extract the fields from Redux Form
const {fields: {passType}} = this.props
// Read the options.
// According to what you showed, it is structured as:
//
// [
// {"Id":1,"Name":"VIP"},
// {"Id":2,"Name":"Normal"},
// ]
const {passTypes} = this.props
return (
<div>
<div className="label">Pass type</div>
<div className="controls">
{passTypes.map(option =>
<label>
<input
type="radio"
{...passType}
value={option.Id}
checked={passType.value === option.Id}
/>
{option.Name}
</label>
)}
</div>
</div>
)
}
以上render
方法正在迭代passTypes
构建无线电输入。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)