![动态生成单选按钮]( "动态生成单选按钮")
本文介绍了动态生成单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 redux 表单，其中包含了一些单选按钮:
{passType.touched &&passType.error &&<span className="error">{passType.error}</span>}<br/>
一切都很好，但现在传递类型必须从状态动态生成:
PassTypes":[{"Id":1,"Name":"VIP"},{"Id":2,"Name":"Normal"}]
这不起作用:
const renderPassTypes = passTypes =>passTypes.map((passType, i) =>()
我应该如何从一个对象编码一组单选按钮?
我还有一个验证器也需要继续运行:
const sendInviteValidator = createValidator({通行证类型:必填，});
解决方案
您尝试的似乎不错.
render() {//从 Redux 表单中提取字段const {fields: {passType}} = this.props//读取选项.//根据你所展示的，它的结构如下:////[//{"Id":1,"Name":"VIP"},//{"Id":2,"Name":"Normal"},//]const {passTypes} = this.props返回 (<div><div className="label">传递类型</div><div className="控件">{passTypes.map(option =><标签>)}
)}
上面的 render 方法正在迭代 passTypes 以构造无线电输入.
I have a redux form where I included some radio buttons:
<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 />
All well and good, but now the pass types must be dynamically generated from state:
This doesn't work:
const renderPassTypes = passTypes => passTypes.map((passType, i) =>
(
<input
type="radio"
{...passType}
id="passType"
value={passType.Id}
checked={passType.Id === ?!?!?}
/> {passType.Value}<br />
)
How should I go about coding a group of radio buttons from an object?
I also have a validator that needs to continue to function as well:
const sendInviteValidator = createValidator({
passType: required,
});
解决方案
What you tried seems good.
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>
)
}
The above render method is iterating over passTypes to construct the radio inputs.
这篇关于动态生成单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！