javascript - 如何正确地将我的点击处理程序从父级传递给子级？

Question

我一直在尝试重构我的记分板组件，因为我无法将点击处理程序从父级正确传递给子级。我做错了什么？

这是我的组件结构

import React, { useState } from "react";
import "./App.css";

function ScoreBoard(props) {
  return (
    <section className="scoreboard">
      <div className="topRow">
        <div className="home">
          <h2 className="home__name">{props.data.home.name}</h2>
          <div className="home__score">{props.data.home.score}</div>
        </div>
        <div className="timer">00:03</div>
        <div className="away">
          <h2 className="away__name">{props.data.away.name}</h2>
          <div className="away__score">{props.data.away.score}</div>
        </div>
      </div>
      <BottomRow />
    </section>
  );
}

function TDButton(props) {
  return (
    <button className={props.side + "Buttons__touchdown"}>
      {props.side.toUpperCase() + " Touchdown"}
    </button>
  );
}

function FGButton(props) {
/* similar to TDButton */
}

function Buttons(props) {
  let scoreCounter = props.scoreCounter;
  return (
    <section className="buttons">
      <div className="homeButtons">
        <TDButton side="home" onClick={scoreCounter("Lions", 7)} />
        <TDButton side="away" onClick={scoreCounter("Tigers", 7)} />
      </div>
      <div className="awayButtons">
        <FGButton side="home" onClick={scoreCounter("Lions", 3)} />
        <FGButton side="away" onClick={scoreCounter("Tigers", 3)} />
      </div>
    </section>
  );
}

function App() {
  const data = {
    home: { name: "Lions", score: 32 },
    away: { name: "Tigers", score: 32 }
  };
  const [homeScore, sethomeScore] = useState(data.home.score);
  const [awayScore, setawayScore] = useState(data.away.score);

  const scoreCounter = (team, amount) => {
    if (team === data.home.name) {
      console.log("in");
      sethomeScore(homeScore + amount);
    } else {
      console.log("out");
      setawayScore(awayScore + amount);
    }
  };

  return (
    <div className="container">
      <ScoreBoard data={data} />
      <Buttons data={data} scoreCounter={() => scoreCounter} />
    </div>
  );
}

初始组件都存在于 App 中，因此我试图将其分解成更小的组件。我似乎无法让点击处理程序工作。我究竟做错了什么？也许我的组件故障可以改进？谢谢!

Answer 1

您向 TButton 添加了 Prop ，但您并未在内部使用它。使用这样的东西:

function TDButton(props) {
  return (
    <button className={props.side + "Buttons__touchdown"} onClick={props.onClick}>
      {props.side.toUpperCase() + " Touchdown"}
    </button>
  );
}

是这样的:

    <TDButton side="home" onClick={scoreCounter("Lions", 7)} />

    <button className={props.side + "Buttons__touchdown"} onClick={scoreCounter("Lions", 7)}>
      {props.side.toUpperCase() + " Touchdown"}
    </button>

因为您正在将 Prop 传递给父级的事件。

但这只有在 scoreCounter("Lions", 7) 返回一个函数时才有效，如果它是执行您需要的操作的常规函数​​:

<TDButton side="home" onClick={() => scoreCounter("Lions", 7)} />

所以 props 是一个函数，而不是函数返回的值。

这可能不是你想要的:

<Buttons data={data} scoreCounter={() => scoreCounter} />

scoreCounter 将是返回函数值的函数(回答先前的consern，但你真的想要正常的函数，因为上面的函数没有参数并且你使用将被忽略的'Lion'):

<Buttons data={data} scoreCounter={scoreCounter} />