ReactJS可编辑表格创建及按gameId与roundId获取输入值方法

我是ReactJS新手，正尝试创建如下带输入框的表格：

<table className="table table-bordered table-sm">
  <thead>
    <tr>
      <th></th>
      {gameList.map((game)=>{
        return (
          <th key={game.id}>{game.game_type}</th>
        )
      })}
    </tr>
  </thead>
  <tbody>
    {roundList.map((round)=>{
      return(
        <tr key={round.id}>
          <td>{round.game_round}</td>
          {gameList.map((game)=>{
            return (
                <td key={game.id}>
                  <input type="text"/>
                </td>
              )
            })}
        </tr>
      )
    })}
  </tbody>
</table>

表格效果：

请问如何按照gameId和roundId分别获取所有输入框的值？

解决方案：通过受控组件绑定状态管理输入值 #

在React中，用受控组件+状态存储的方式，就能精准通过roundId和gameId定位每个输入框的值。

1. 初始化状态

在组件内定义一个状态，用来存储所有输入框的值，推荐用roundId-gameId的组合键作为标识，或者嵌套对象结构：

import { useState } from 'react';

// 组件内部初始化状态
const [inputValues, setInputValues] = useState({});
// 状态结构示例：{ "1-2": "用户输入值" } （1是roundId，2是gameId）

2. 给输入框绑定事件与值

修改表格中的input元素，添加value绑定和onChange事件，用round.id和game.id唯一标识当前输入框：

<td key={game.id}>
  <input 
    type="text"
    // 从状态中取对应的值，为空时显示空字符串
    value={inputValues[`${round.id}-${game.id}`] || ''}
    onChange={(e) => {
      const uniqueKey = `${round.id}-${game.id}`;
      // 更新状态，保留原有值的同时覆盖当前输入框的新值
      setInputValues(prev => ({
        ...prev,
        [uniqueKey]: e.target.value
      }));
    }}
  />
</td>

如果偏好嵌套对象的状态结构，也可以这么写：

// 初始化状态
const [inputValues, setInputValues] = useState({});

// input的onChange事件
onChange={(e) => {
  setInputValues(prev => ({
    ...prev,
    [round.id]: {
      ...prev[round.id],
      [game.id]: e.target.value
    }
  }));
}}

// input的value属性
value={inputValues[round.id]?.[game.id] || ''}

3. 按gameId/roundId提取值

需要获取指定维度的输入值时，直接从状态中提取即可：

// 获取指定roundId下的所有输入值（组合键结构）
const getRoundAllValues = (targetRoundId) => {
  return Object.entries(inputValues).reduce((result, [key, value]) => {
    if (key.startsWith(`${targetRoundId}-`)) {
      const gameId = key.split('-')[1];
      result[gameId] = value;
    }
    return result;
  }, {});
};

// 获取指定gameId下的所有输入值（组合键结构）
const getGameAllValues = (targetGameId) => {
  return Object.entries(inputValues).reduce((result, [key, value]) => {
    if (key.endsWith(`-${targetGameId}`)) {
      const roundId = key.split('-')[0];
      result[roundId] = value;
    }
    return result;
  }, {});
};

// 如果是嵌套结构，获取指定round的值更简洁
// const getRoundAllValues = (targetRoundId) => inputValues[targetRoundId] || {};

完整组件示例

整合后的完整组件代码：

import { useState } from 'react';

const GameScoreTable = ({ gameList, roundList }) => {
  const [inputValues, setInputValues] = useState({});

  return (
    <table className="table table-bordered table-sm">
      <thead>
        <tr>
          <th></th>
          {gameList.map((game) => (
            <th key={game.id}>{game.game_type}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {roundList.map((round) => (
          <tr key={round.id}>
            <td>{round.game_round}</td>
            {gameList.map((game) => {
              const inputKey = `${round.id}-${game.id}`;
              return (
                <td key={game.id}>
                  <input
                    type="text"
                    value={inputValues[inputKey] || ''}
                    onChange={(e) => {
                      setInputValues(prev => ({
                        ...prev,
                        [inputKey]: e.target.value
                      }));
                    }}
                  />
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default GameScoreTable;

内容的提问来源于stack exchange，提问作者mapuna