как узнать, какой «дочерний» флажок установлен в reactjs - PullRequest
Новая
       8

как узнать, какой «дочерний» флажок установлен в reactjs

0 голосов
/ 22 апреля 2020

Я новичок в React, и я надеюсь, что это не звучит глупо. немного контекста здесь: у меня есть компонент ExerciseCard, который имеет флажок (и другие вещи), этот компонент отображается внутри CreateNewWorkout, и здесь я получаю данные из API, поэтому теперь я хочу получить все ExerciseCard компоненты, чей checkBox выбран в списке с именем этого компонента (в состоянии он называется 'name', а в API он называется 'имя_приятия').

вот мой код
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;

1 Ответ

0 голосов
/ 22 апреля 2020

Вы можете получить доступ к флажку, используя e.target Если вам нужно что-то определенное в качестве пользовательских данных (например, идентификатор, имя или что-то еще, вы можете определить свою функцию 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, но вы можете сменить его, чтобы он соответствовал вашим потребностям.

...