Question

所以这个想法就像其他任何汽车购买网站一样。用户选中一个标有某些内容的框，然后该应用程序会根据标签的内容进行更新或过滤。我已经知道如何执行此操作，但是对步骤有些困惑。我认为应该如何工作是，当有人单击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;

Answer 1

与$lookup中一样，该复选框是多项选择，因此您需要管理Sort中为其选中复选框的选择。实现可以是
Sort

...<input type="checkbox" name="SUV" id=0 onclick=onClicked(this)/> ...函数就像

onClicked

在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 }中，将VehicleList替换为<Sort />

<Sort onSelected=onSortSelected/>是onSortSelected的功能。然后，您可以知道在VehicleList的{{1}}中选择了什么。设置状态或从选择中做任何想做的事情。

Answer 2

您可以按照@basic的建议进行操作，并添加包含onChange的{{1}}。

setState()

然后<li style={{ listStyleType: "none"}}><input type="checkbox" name="SUV" onChange={this.handleChange}/> SUV</li>看起来像这样：

handleChange

选中复选框后，会将复选框名称添加到组件状态下名为过滤器的数组中。
取消选中该复选框时，会将其从过滤器数组中删除。

然后，您应该能够将此过滤器阵列与车辆的车身进行比较。

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

2 个答案: