reactjs - redux-form 多个复选框，单个数组中的值，没有 bool 值

Question

我知道该复选框接收一个 bool 值，那么我该怎么做才能通过多个复选框更改此值。

下面是我的所有复选框，JSX 文件，每个复选框都是一个类别，用户可以选择一个或多个类别

<div className='columns is-multiline'>
  {this.props.propsCategories.data.list.map((category, i) => (
    <div key={ i } className='column is-one-quarter'>
      <Field
        name='category[]'
        label={ category.title }
        component={ WrapperInputCheckbox }
        setCategory={(e) => this.handleChange(e, category.id)}
      />
    </div>
  ))}
</div>

在我的handleChange 中，我只是尝试更改单个值。

//handleChange
handleChange = (e, id) => {
  e.target.value = id
  console.log(e.target.value);
}

但是当我在类别数组中提交表单时，我得到了

Category: Array[0]
  "" : true
  length : 0

该值仍然是 bool 值:X

我需要将值变成一个数组，例如

category['id-1', 'id-n']

Answer 1

您可以使用输入的名称在id中创建一个复合名称，或者传递带有其他单词的 Prop 。

您还应该使用map，当您想要将函数应用于每个项目时非常有用，而且它比使用for循环构建一个更简单、更简洁列表。

<div className={classNameContentGroup}>
    { items.map((item) => (
        <div className={`${classNameContent } `"}>
            <input
                {...input}
                name={name}
                type="checkbox"
                value={ item.value }
                className={className}
                id={ `${name}-${item.value}` }
            />
            <label className={classNameLabel} htmlFor={ `${ nameR}-${item.value}` }>
                {item.label}
            </label>
        </div>
    ))
    }
</div>