动态生成单选按钮

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":[{"Id":1,"Name":"VIP"},{"Id":2,"Name":"Normal"}]

这不起作用：

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

动态生成单选按钮

Dynamically generate radio buttons

redux

redux-form