Javascript 反应：复选框更改后如何更新状态

所以这个想法就像其他任何汽车购买网站一样。用户选中一个标记为某物的框，应用程序将根据标签进行更新或过滤。我已经有了这样做的想法，但在步骤上有点困惑。我的想法是，当有人点击SUV复选框时，状态会更新为更改，并检查车身样式是否与复选框的名称相同。任何帮助都将不胜感激

VehicleList.js
import React, { Component } from "react"
import './App.css';
import Vehicles from "./Vehicles"
import Sort from './Sort';
import { MyProvider, MyContext } from "./Context";

export default class VehicleList extends Component {
  render() {
      return (
        <React.Fragment>
          <Sort />
          <div className="vehicles">
            <div className="showcase">
                  <MyContext.Consumer>
                    {value => {
                      return value.vehicles.map(vehicle => {
                        return <Vehicles key={vehicle.id} vehicle=
                        {vehicle} />
                      })
                    }}
                  </MyContext.Consumer>
              </div>
            </div>
        </React.Fragment>
      )
    }
  }

Sort.js
import React, { Component } from 'react';
import './App.css';


class Sort extends Component {

  render() {
    return (
      <div className="sort-container">
        <h1>Sort By</h1>
        <ul>
          <li style={{ listStyleType: "none"}}><input type="checkbox" name="SUV"/>  SUV</li>
          <li style={{ listStyleType: "none"}}><input type="checkbox" name="Sedan"/>  Sedan</li>
        </ul>
      </div>
    )
  }
}

export default Sort;

VehicleList.js
从“React”导入React，{Component}
导入“/App.css”；
从“/车辆”进口车辆
从“./Sort”导入排序；
从“/Context”导入{MyProvider，MyContext}；
导出默认类车辆列表扩展组件{
render（）{
返回(
{value=>{
返回值.vehicles.map（车辆=>{
返回
})
}}
)
}
}
Sort.js
从“React”导入React，{Component}；
导入“/App.css”；
类排序扩展组件{
render（）{
返回(
排序

SUV
Sedan

)
}
}
导出默认排序；

与在

排序

中一样，复选框是多选的，因此您需要在

排序

中管理选中复选框的选项。实现可以是

单击的
函数如下所示

function onClicked(checkBox) {
  if (checkBox.checked) {
     this.choices |= 1<<checkBox.id; // choices is a member of Sort
  } else {
     this.choices &= ~(1<<checkBox.id); // de-select
  }
  this.props.onSelected(this.choices); // onSelected is a callback or delegate from VehicleList
}

单击函数（复选框）{
如果（复选框。选中）{
this.choices |=1您可以按照@basic的建议添加一个
onChange
，其中包含一个
setState（）

选中复选框后，它会将复选框的名称添加到组件状态下名为filters的数组中。

当复选框被取消选中时，它将从过滤器数组中删除它

然后，您应该能够将此过滤器阵列与车身进行比较。
添加一个onChange，然后在onChange中设置state（）。是否很快会有问题？可能是在文章的编辑中？
<li style={{ listStyleType: "none"}}><input type="checkbox" name="SUV" onChange={this.handleChange}/>  SUV</li>

handleChange(event){
    if(event.target.checked) {
        this.setState({
          filters: [...filters, event.target.name]
        });
    }
    else {
        let array = [...filters];
        if(array.include(e.target.name)) {          
            array.splice(indexOf(e.target.name);
            this.setState({filters: array)})
        }
    }
}