Question

我知道复选框会收到一个bool值，所以我可以用多个复选框来更改它。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Split input</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" />
    <input type='button' id='load-file' value='Load'>
    <div id="file-content"></div>
</body>

<script>        
    ( function ( $ ) {
        $( '#load-file' ).click( function () {

            if ( ! window.FileReader ) {
                return alert( 'FileReader API is not supported by your browser.' );
            }

            var $i = $( '#file' ), input = $i[0];

            if ( input.files && input.files[0] ) {
                file = input.files[0];
                fr = new FileReader();
                fr.onload = function () {
                    $( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )
                };
                fr.readAsText( file );
            } else {
                alert( "File not selected or browser incompatible." )
            }
        } );
    } )( jQuery ); 
</script>
</html>

在我的处理中改变我只是尝试更改单个值。

<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);
}

价值仍然是布尔：X

我需要将值变为类似

的数组

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

Answer 1

您可以使用输入的名称在 id 中创建复合名称，或者使用其他单词传递道具。

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

<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>

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

1 个答案: