动态生成单选按钮 [英] Dynamically generate radio buttons

问题描述

我有一个 redux 表单，其中包含了一些单选按钮:

  通行证类型{passType.touched &&passType.error &&<span className="error">{passType.error}</span>}<br/><输入类型=收音机"{...passType}id="passType"值=0"选中={passType.value === '0'}/>VIP<br/><输入{...passType}类型=收音机"id="passType"值=1"选中={passType.value === '1'}/>常规<br/>

一切都很好，但现在传递类型必须从状态动态生成:

<块引用>

PassTypes":[{"Id":1,"Name":"VIP"},{"Id":2,"Name":"Normal"}]

这不起作用:

const renderPassTypes = passTypes =>passTypes.map((passType, i) =>(<输入类型=收音机"{...passType}id="passType"值={passType.Id}已检查={passType.Id === ?!?!?}/>{passType.Value}
)

我应该如何从一个对象编码一组单选按钮?

我还有一个验证器也需要继续运行:

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 =><标签><输入类型=收音机"{...passType}值={option.Id}选中={passType.value === option.Id}/>{option.Name})}

)}

上面的 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:

PassTypes":[{"Id":1,"Name":"VIP"},{"Id":2,"Name":"Normal"}]

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.

这篇关于动态生成单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！