动态生成单选按钮

动态生成单选按钮

本文介绍了动态生成单选按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 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.

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

07-25 17:30