如何知道在 reactjs 中选择了哪个 "child" 复选框

Question

我是 React 的新手，我希望这听起来不傻。这里有一点上下文：我有一个 ExerciseCard 组件，它有一个复选框，（和其他东西），这个组件在 CreateNewWorkout 内呈现，我在这里从 API 中获取数据，所以现在我想获取所有 ExerciseCard 组件，这些组件在具有该组件名称的列表中选择了其复选框（在它被称为 'name' 的状态下，在 api 它是称为 'exerciseName').

这是我的代码
CreateComponent

import React from "react";
import ExerciseCard from "../component/ExerciseCard";
import { Row } from "antd";

import WorkoutModal from "../component/WorkoutModal";

class CreateNewWorkout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.changed = this.changed.bind(this);
  }
  // this is the onChange event handlet
  changed = (e) => {
    console.log(e.target.checked);
  };
  async componentDidMount() {
    let response = await fetch("http://localhost:1337/calisthenics-exercices");

    const data = await response.json();
    // i used "objecto" to store an array of objects in state later
    const objecto = [];

    data.map((item) =>
      objecto.push({
        id: item.id,
        name: item.exerciceName,
        discription: item.discription,
        //  the json file has another object file called 'type' inside it for every item
        type: item.type.type,
        imageURL: item.imgURL,
        youtubeURL: item.youtubeURL,
      })
    );
    this.setState(objecto);
  }

  render() {
    return (
      <>
        <div
          style={{
            position: "fixed",
            bottom: 0,
            zIndex: 2,
          }}
        >
          <WorkoutModal></WorkoutModal>
        </div>
        <Row>
          {Object.entries(this.state).map((item) => (
            <ExerciseCard
              title={item[1].name}
              type={item[1].type}
              key={item}
              description={item[1].discription}
              // image={item[1].imageURL}
              youtubeURL={item[1].youtubeURL}
              //changed for onChange event
              changed={this.changed}
            ></ExerciseCard>
          ))}{" "}
          }
        </Row>
        {console.log(this.state)}
      </>
    );
  }
}

export default CreateNewWorkout;

如果需要ExerciseCard

import React from "react";
import { Col } from "antd";

import ExerciseModal from "./ExerciseModal";
import { Card, Tag, Checkbox } from "antd";
//import Title from "antd/lib/skeleton/Title";
//import { formatCountdown } from "antd/lib/statistic/utils";

const { Meta } = Card;
function ExerciseCard(props) {
  function tagColor() {
    switch (props.type) {
      case "core":
        return "magenta";
      case "lower body":
        return "volcano";
      case "horizontal push":
        return "cyan";
      case "horizontal pull":
        return "blue";
      case "vertical pull":
        return "geekblue";
      case "vertical push":
        return "purple";
      default:
        return "black";
    }
  }

  return (
    <Col xs={12} sm={8} md={6} lg={4}>
      <Card>
        <Meta title={props.title} />

        <Tag
          style={{ position: "absolute", top: 0, left: 0 }}
          color={tagColor()}
        >
          {props.type}
        </Tag>

        <Checkbox
          onChange={props.changed}
          style={{
            padding: "20px 0 0 0",
          }}
        ></Checkbox>
        <ExerciseModal
          title={props.title}
          description={props.description}
          youtubeURL={props.youtubeURL}
        ></ExerciseModal>
      </Card>
    </Col>
  );
}

export default ExerciseCard;

Answer 1

您可以访问复选框，使用 e.target 如果您需要一些特定的用户定义数据（例如 id、名称或其他内容，您可以将 change 函数定义如下：

 changed = (e, title) => {
    console.log(e.target.checked);
  };

请注意，您已经将函数定义为 arrow function，您不必在构造函数中绑定 this。

然后像现在一样将函数传递给 ExcerciseCard。最后通过以下方式调用函数：

 <Checkbox
          onChange={e => props.changed(e, props.title)}
          style={{
            padding: "20px 0 0 0",
          }}
        ></Checkbox>

我用 title 编写了一个示例，但您可以随意更改它，使其符合您的需要。

如何知道在 reactjs 中选择了哪个 "child" 复选框

how to know which "child" checkbox is selected in reactjs

reactjs

event-handling

react-state-management