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

发布时间：2020-12-15 05:04:58 所属栏目：百科来源：网络整理

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

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

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

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

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

如果您不关心订单,并且您只是想将项目附加到数组中,我们肯定可以完全按照您在问题中的建议进行操作.在复选框的更改事件中,检查是否选中了复选框(如果选中则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 })
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!