时间戳

首页 > 解决方案 > React：更改复选框后如何更新状态

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

问题描述

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

标签： javascriptreactjs

解决方案

如 中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。然后就可以知道在中选择了Sort什么onSortSelected。设置一个状态或从选择中做任何你想做的事情。

推荐阅读