reux-form multi复选框，单个数组中的值没有布尔值

Question

我知道该复选框接收一个布尔值，那么我该怎么做才能使用多个复选框来更改它。

下面是我有全部复选框的地方，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 = (e, id) => {
  e.target.value = id
  console.log(e.target.value);
}

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

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

值仍然是布尔值：X

我需要值变成一个数组，就像

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

Answer 1

您可以使用输入的名称或在 prop 中传递带有其他单词的 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>