Блог

У меня есть родительский и дочерний компоненты. Дочерний элемент изменяет цвет div и обновляет победителя и выбранные элементы в состоянии. У меня есть кнопка в моем родителе. При отправке мне нужно перенести данные победителя в массив в моем родительском компоненте и отправить их в Redux. Я попытался отправить обратный вызов, но поскольку мне уже нужно вызвать событие on-click внутри дочернего элемента, я не могу понять, как это сделать.

Родительский

 import React, { Component } from "react";
import MatchCard from "../MatchCard";
import Shuffler from "../Shuffler";

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

    this.state = {
      winners: [],
    };
  }

  render(playerNames) {
    let shuffled = Shuffler(this.props.playerNames);

    let newArr = shuffled.reduce(function (result, value, index, array) {
      if (index % 2 === 0) result.push(array.slice(index, index   2));
      return resu<
    }, []);

    console.log(newArr);

    return (
      <div className="inline-block flex justify-center">
        <div className="ml-2 mr-2">
          {newArr.map((players, index) => (
            <>
              <MatchCard
                key={index}
                players={players}
                handleWinner={this.handleMatchCard}
              />
            </>
          ))}
          <div className="inline-block flex justify-center">
            <button
              className="m-6 block bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded w-55"
              onClick={this.handleClick}
            >
              {shuffled > 2 ? "Next Round" : "Final"}
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default TournamentGrid;

  

Дочерний элемент

 import React, { Component } from "react";
import PlayerCard from "./PlayerCard";
import Shuffler from "./Shuffler";

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

    this.state = {
      selected: 0,
      winner: "",
    };
  }

  render(key, players) {
    let arr = this.props.players;
    return (
      <div className="mt-4 mb-4">
        <>
          <PlayerCard
            player={arr[0]}
            selected={this.state.selected === 1}
            handleClick={() => this.setState({ selected: 1, winner: arr[0] })}
          />
          <PlayerCard
            player={arr[1]}
            selected={this.state.selected === 2}
            handleClick={() => this.setState({ selected: 2, winner: arr[1] })}
          />
        </>
      </div>
    );
  }
}

export default MatchCard;
  

Вы можете передать функцию обратного вызова в качестве поддержки компоненту MatchCard, который получит победителя примерно так:

 // This method is defined on the Parent component.
const handleWinnerSelect = (card, selected) => {
    this.setState(e => {
        // u need to handle how the selected element is pushed on the array
        // and how remove the previous one.
        const new_state = {...e}
        new_state.push(selected)
        return new_state
    });
}
  

теперь в методе рендеринга вы можете отображать дочерние элементы с помощью этого метода в качестве реквизита. итак
, на карточке соответствия вы обрабатываете событие щелчка и вызываете handleWinnnerSelect