Question

我有一个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＆＃34;：[{＆＃34;标识＆＃34;：1，＆＃34;名称＆＃34;：＆＃34; VIP＆＃34;}，{＆＃34;标识＆＃34 ;: 2，＆＃34;名称＆＃34;：＆＃34;正常＆＃34;}]

这不起作用：

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,
});

Answer 1

你的尝试似乎很好。

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以构建无线电输入。

动态生成单选按钮

1 个答案: