React：更改复选框后如何更新状态

Question

So the idea is like any other car buying website. The user checks a box labeled something and the app updates or filters by whatever the label was. I already have an idea of how to do this but am a little confused on the steps. How I was thinking it should work would be that, when someone clicks on let's say the SUV checkbox the state is updated to change and checks if the body style is equal to the name of the checkbox. Any help would be greatly appreciated.

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;

Answer 1

As in Sort , the checkbox are multiple choice, so you need to manage the selections in Sort for which checkbox is selected. The implementation can be
...<input type="checkbox" name="SUV" id=0 onclick=onClicked(this)/> ...

The onClicked function is like

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
}

In VehicleList , replace <Sort /> to <Sort onSelected=onSortSelected/>

onSortSelected is a function of VehicleList . Then you can know what is selected in Sort in onSortSelected . Set a state or do whatever you want from the choice.

Answer 2

You could do as @basic suggests and add an onChange containing a setState() .

<li style={{ listStyleType: "none"}}><input type="checkbox" name="SUV" onChange={this.handleChange}/>  SUV</li>

Then handleChange would look something like this:

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

When a checkbox is checked, it will add the name of the checkbox to an array named filters in the component state.
When a checkbox is unchecked it will remove it from the array of filters.

You should then be able to compare this array of filters to the body of your vehicle.