React/Redux 我有两个组件，我想使用 handleClick 将一个组件中的数据传递给另一个组件

Question

我有一个从数组中生成成对名称的组件，在这个组件中，我需要选择名称，使其突出显示，然后当我选择使用不同组件中的提交将其添加到本地状态的新数组中。 我也希望能够选择或取消选择该条数据。

减速器和动作已设置，我需要本地方法或函数来执行此操作，我知道可能需要一些提升状态但无法解决。

这是我使用按钮和 onClick 来选择数据片段的组件：

import React, { Component } from "react";
import "../../App.scss";
import Button from "../Button/Button";

class Matches extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
 handleClick() {

  this.setState({ selected: !this.state.selected }); 
}

  render() {
    const { pairs } = this.props;
    let { selected } = this.state;
    return (
      <ul>
        {pairs.map((item, index) => (
          <div className="pairs container__roster__list" key={index}>
            {item.map((names, index) => (
              <button onClick={this.handleClick} className="player" >
                {names}
              </button>
            ))}
          </div>
        ))}
      </ul>
    );
  }
}

export default Matches;

这是我需要将数据传递到的组件，以便将该数据提交到本地状态以存储它，然后将其传递到全局状态：

import React, { Component } from "react";
import "../../App.scss";
import { Link } from "react-router-dom";
import Button from "../Button/Button";
import Matches from "../Matches";

class Tournament extends Component {
  constructor(props) {
    super(props);
    this.state = {
      winners: [],
      round: 0,
    };
  }
  handleClick = () => {
    const { winners } = this.state;
    this.setState({
      winners:
    });
  };

  handleSubmit = () => {
    const { winners, round } = this.state;
    this.setState({ winners: winners, round: round + 1 });
    this.props.handleNextRound(this.state);
  };

  render() {
    const { winners } = this.state;
    return (
      <>
        <div className="container__tournament">
          <h1 className="title__App">PING PONG</h1>

          <section className="container__roster round-one">
            <Matches />
            <Button
              buttonClass="button"
              label="Next Round"
              handleClick={this.handleSubmit}
              disabled={winners.length === 4 ? false : true}
            />
          </section>

          <section className="container__roster semi-final">
            <h2 className="round__title"></h2>
            <Button
              buttonClass="button"
              label="Next Round"
              handleClick={this.handleSubmit}
            />
          </section>

          <section className="container__roster final"></section>

          <Link to={"/"} className="nav-link nav__tournament">
            <Button buttonClass="button " label="Settings" />
          </Link>
        </div>
      </>
    );
  }
}

export default Tournament;