如何在单击时选择并获取表的所有行和列的值，并将其传递给其他Component...Help Me，

Question

因此，我已经为我的数据显示创建了自定义表组件，我希望获得所有的行值，并点击它的标题，并将其传递给任何组件。

这是我的表组件的COde

import PlaceBett from "./PlaceBett";

const MatchBetTable = ({ data }) => {
  const [showPlaceBet, setShowPlaceBet] = useState(false);

  const [team1Back, setTeam1Back] = useState("");
  const [team1Lay, setTeam1Lay] = useState("");
  const [team2Lay, setTeam2Lay] = useState("");
  const [team2Back, setTeam2Back] = useState("");
  const [drawLay, SetDrawLay] = useState("");
  const [drawBack, SetDrawBack] = useState("");

  const handleClick = () => {
    setShowPlaceBet((prev) => !prev);
  };

  // console.log(data.values[0].val1);
  console.log(data);

  return (
    <>
      {showPlaceBet && (
        <PlaceBett
          data={data}
          team1Back={team1Back}
          team1Lay={team1Lay}
          team2Back={team2Back}
          team2Lay={team2Lay}
          drawBack={drawBack}
          drawLay={drawLay}
        />
      )}

      <table className="table-auto  mb-4 text-black w-full ">
        <thead className="bg-gray-500 md:p-5 p-1  text-sm">
          <tr>
            <th className="md:p-5 p-1  text-sm">{data.name}</th>
            <th className="md:p-5 p-1  text-sm" colSpan="5"></th>
            <th className="md:p-5 p-1  text-sm">BET DELAY-3 SEC</th>
          </tr>
        </thead>
        <thead>
          <tr
            className="bg-white md:p-5 p-1  text-sm border border-table_border"
            onClick={handleClick}
          >
            <th className="md:p-5 p-1  text-sm">MAX 50000</th>
            <th className="md:p-5 p-1  text-sm" colSpan="2"></th>
            <th className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border  ">
              BACK <p>(Back)</p>
            </th>
            <th className="md:p-5 p-1  text-sm text-black bg-table_row-cream border border-table_border">
              LAY <p>(lay)</p>
            </th>
            <th className="md:p-5 p-1  text-sm" colSpan="2"></th>
          </tr>
        </thead>
        <tbody>
          <tr className="md:p-5 p-1  text-sm border border-table_border text-center">
            <td className="bg-gray-300 md:p-5 p-1  text-sm">
              {data.values[0].val1 === null ? "-" : data.values[0].val1}
            </td>
            <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border">
              -<p>(-)</p>
            </td>
            <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
              -<p>(-)</p>
            </td>
            <td
              dataTitle={data.values[0].odds}
              className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border "
              onClick={(e) => {
                console.log(e.target.innerHTML);
                setTeam1Back(e.target.innerHTML);
                console.log("team1Back", team1Back);
              }}
            >
              {data.values[0].odds === null ? "-" : data.values[0].odds}
            </td>

            {/* {!data.values.odds && (
                <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                  0<p>(-)</p>
                </td>
              )} */}

            <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border ">
              {data.values[0].val2 === null ? 0 : data.values[0]?.val2}
            </td>
            <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border ">
              -<p>(-)</p>
            </td>
            <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border ">
              -<p>(-)</p>
            </td>
          </tr>

          {data.values[1] && (
            <tr className="md:p-5 p-1  text-sm border border-table_border text-center">
              <td className="bg-gray-300 md:p-5 p-1  text-sm">
                {data.values[1]?.val1}
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>

              <td
                className="md:p-5 p-1 odd:bg-table_row-cream  text-sm  bg-table_row-blue border border-table_border"
                onClick={(e) => SetDrawBack(e.target.value)}
              >
                {data.values[1]?.odds}
              </td>
              <td
                className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border"
                onClick={(e) => SetDrawLay(e.target.value)}
              >
                {data.values[1]?.val2 === null && "0"}
                {data.values[1]?.val2 && data.values[1]?.val2}
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
            </tr>
          )}
          {data?.values[2] && (
            <tr className="md:p-5 p-1  text-sm border border-table_border text-center">
              <td className="bg-gray-300 md:p-5 p-1  text-sm">
                {data?.values[2] && data.values[2]?.val1}
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>

              <td
                className="md:p-5 p-1 odd:bg-table_row-cream  text-sm  bg-table_row-blue border border-table_border"
                onClick={(e) => setTeam2Back(e.target.value)}
              >
                {data?.values[2] && data.values[2]?.odds}
              </td>
              <td
                className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border"
                onClick={(e) => setTeam2Lay(e.target.value)}
              >
                {data.values[2]?.val2 === null && "0"}
                {data.values[2]?.val2 && data.values[2]?.val2}
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  );
};

export default MatchBetTable;

我希望使用Team1Back和Team1Lay...and的值处于状态，在单击特定行后将其传递给placeBet组件.

Answer 1

你不能做这样的事吗？

 <>
          {data.values.map((bet) => (
            <tr className="md:p-5 p-1  text-sm border border-table_border text-center">
              <td className="bg-gray-300 md:p-5 p-1  text-sm">{bet?.val1}</td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-blue border border-table_border ">
                -<p>(-)</p>
              </td>
    
              <td
                className="md:p-5 p-1 odd:bg-table_row-cream  text-sm  bg-table_row-blue border border-table_border"
                onClick={(e) => SetDrawBack(e.target.value)}
              >
                {bet?.odds}
              </td>
              <td
                className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border"
                onClick={(e) => SetDrawLay(e.target.value)}
              >
                {bet.val2 === null && "0"}
                {bet.val2 && bet?.val2}
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
              <td className="md:p-5 p-1  text-sm  bg-table_row-cream border border-table_border">
                -<p>(-)</p>
              </td>
            </tr>
          ))}
        </>

Answer 2

用.map代替数据，data1.然后将onClick添加到行中，并从map传递整个对象。