Question

我有一个这样的列表：

<div className="doubleCol">
    {this.state.symptoms.map(item => (
        <ListItem key={item.ObjectID}>
            <input type="checkbox" className="sympSelect" />
            {item.name}
        </ListItem>
     ))}
</div>

所有呈现的项目都有复选框，我希望它根据选中的框来过滤页面其他位置的其他列表。为此，我需要选中复选框以更改状态并将新状态传递给方法，该方法应该仅过滤和显示第二个列表中具有与第一个列表中的项目相关联的ID的项目。

从我阅读的内容来看，复选框是受控还是不受控制的无关紧要。

class Home extends React.Component {
    state = {
        conditions: [],
        symptoms: [],
        selectedSymptom: []
    }
    componentDidMount() {
        this.getConditionsMethod();
        this.getSymptomsMethod();
    }

    getConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name))
                this.setState({
                    conditions: data.data
                })
            })
            .catch(err => console.log(err))
    };

    filterConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name));
                this.setState({
                    selectedSymptom: data.data
                })
            })
            .catch(err => console.log(err))
    };

但是我对如何在选中复选框时构造onChange以及如何使该实现过滤器感到困惑。

Answer 1

这是您的解决方案，可以为复选框添加onChange事件，并将记录过滤为selectedS症状和症状。请检查代码是

import React, { Component } from "react";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      conditions: [],
      symptoms: [
        { ObjectID: 1, name: "xyz" },
        { ObjectID: 2, name: "pqr" }
      ],
      selectedSymptom: [],
      checked: ""
    };
  }

  updateCheckBox = (event, item) => {
    if (event.target.checked) {
      let selectedList = this.state.selectedSymptom;
      selectedList.push(item);
      this.setState({
        ...this.state,
        checked: this.state.checked == "checked" ? "" : "checked",
        selectedSymptom: selectedList
      });
    } else {
      const symptomss = this.state.selectedSymptom.filter(element => {
        if (element.ObjectID != data.ObjectID) {
          return item;
        }
      });
      this.setState({
        ...this.state,
        checked: "",
        selectedSymptom: symptomss
      });
    }
  };

  render() {
    return (
      <div className="doubleCol">
        {this.state.symptoms.map(item => (
          <ListItem key={item.ObjectID}>
            <input
              type="checkbox"
              className="sympSelect"
              onChange={this.updateCheckBox(e, item)}
              id="symptoms_id"
              defaultChecked={this.state.checked}
            />
            {item.name}
          </ListItem>
        ))}
      </div>
    );
  }
}
export default Home;

使用复选框更改状态和排序列表

1 个答案: