javascript - 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;

标签： javascriptreactjsreduxreact-redux