如何使用React和表单来获取已检查复选框值的数组？

Question

我正在尝试为我的投资组合网站构建一个过滤器.复选框允许您选择一种技术(react,redux,jquery等)来显示包含那些/那些技术的工作.因此,每次用户点击一个框时,我都希望将值(JavaScript,Redux,React等)添加到我在另一个函数中使用的数组中,以检查我的投资组合并筛选出不存在的内容.

我发现这很困难,我认为应该很简单.有人能指出我正确的方向吗？有没有办法简单地有一个函数触发器(onChange回调？)读取我的表单输入元素的已检查/未检查状态,然后相应地更新我的状态数组？我可以在React中获取所有复选框的状态吗？我的复选框是否需要单独检查/取消选中状态？

似乎jQuery使用选择器很有可能:

$('input[type="checkbox"]:checked').each(function () {}

Answer 1

如果您不关心订单,并且您只是想将项目附加到数组中,我们肯定可以完全按照您在问题中的建议进行操作.在复选框的更改事件中,检查是否选中了复选框(如果选中则event.target.checked返回true;如果未选中则返回false)并相应地处理数组逻辑.这是一个如何工作的简单表示:

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Portfolio extends Component {
  constructor() {
    super()
    // initialize your options array on your state
    this.state = {
      options: []
    }
  }

  onChange(e) {
    // current array of options
    const options = this.state.options
    let index

    // check if the check box is checked or unchecked
    if (e.target.checked) {
      // add the numerical value of the checkbox to options array
      options.push(+e.target.value)
    } else {
      // or remove the value from the unchecked checkbox from the array
      index = options.indexOf(+e.target.value)
      options.splice(index, 1)
    }

    // update the state with the new array of options
    this.setState({ options: options })
  }

  render() {
    return (
      <main className='portfolio'>

        <form>
          <div className="input-group">
            <label>cb1</label>
            <input type="checkbox" value={1} onChange={this.onChange.bind(this)} />
          </div>
          <div className="input-group">
            <label>cb2</label>
            <input type="checkbox" value={2} onChange={this.onChange.bind(this)} />
          </div>
          <div className="input-group">
            <label>cb3</label>
            <input type="checkbox" value={3} onChange={this.onChange.bind(this)} />
          </div>
        </form>

        <div className="selected-items">
          {this.state.options.map(number => 
             <p key={number}>item: {number}</p>
          )}
        </div>

      </main>
    )
  }
}

如果你不关心顺序,如果你可以追加数值的阵列,像我一样在这个例子中,你可以很容易地给你的复选框来分类的数值,你可以不管的更新您的状态,所以它总是以某种顺序之前对数组进行排序他们被检查的顺序.

  onChange(e) {
    // current array of options
    const options = this.state.options
    let index

    // check if the check box is checked or unchecked
    if (e.target.checked) {
      // add the numerical value of the checkbox to options array
      options.push(+e.target.value)
    } else {
      // or remove the value from the unchecked checkbox from the array
      index = options.indexOf(+e.target.value)
      options.splice(index, 1)
    }

    // sort the array
    options.sort()    

    // update the state with the new array of options
    this.setState({ options: options })
  }