ReactJS 如何向自定义表格的指定行插入模态框输入的数据

实现思路 #

你需要把每行的数据存在公共父组件的状态中，通过唯一标识date_column匹配对应行的存储位置，输入完成后仅更新对应标识的状态即可实现指定行回填，具体实现步骤如下：

步骤1：父组件新增状态管理行数据和当前激活行 #

在渲染表格行的父组件中新增两个状态：

// 存储每行数据，key为date_column值，value为对应行8个td的内容（可按需求用数组/对象存储）
const [rowData, setRowData] = useState({});
// 存储当前点击的行对应的date_column，用于标记模态框输入数据要回填的目标行
const [activeDate, setActiveDate] = useState(null);

步骤2：修改行点击逻辑，记录激活行标识 #

修改Date_columns组件的行点击事件，点击时先记录当前行的date_column为激活行，再弹出模态框：

如果handleShowModal和selectedMY是父组件的方法/变量，也可以把点击行的逻辑提到父组件，通过props传递给子组件，避免变量作用域问题。

<tr 
  onClick={() => {
    setActiveDate(props.date_column);
    handleShowModal(selectedMY, props.date_column);
  }} 
  onMouseEnter={toggleHover} 
  onMouseLeave={toggleHover} 
  className={hovered ? classes.trHover : ''}
>

步骤3：模态框提交时更新对应行的数据 #

在模态框的提交回调函数中，拿到用户输入的内容后，仅更新rowData中activeDate对应的数据：

const handleModalSubmit = (inputValues) => {
  setRowData(prev => ({
    ...prev,
    // inputValues是你需要回填的8个td的内容，比如数组['a','b',...]或者对象{col1:'xx',col2:'xx'}
    [activeDate]: inputValues
  }));
  // 此处补充关闭模态框的逻辑
}

步骤4：将行数据传递给子组件并渲染 #

首先修改渲染行的代码，把对应行的数据传给Date_columns组件：

{(() => {
  const rows = [];
  for (let i = 1; i <= 31; i++) {
    rows.push(<Date_columns key={i} date_column={i} rowData={rowData[i] || []} />);
  }
  return rows;
})()}

然后修改Date_columns组件的td，对应渲染传入的数据：

// 示例按数组存储inputValues的情况，如果是对象就取对应的字段即可
return (
  <tr 
    onClick={() => {
      setActiveDate(props.date_column);
      handleShowModal(selectedMY, props.date_column);
    }} 
    onMouseEnter={toggleHover} 
    onMouseLeave={toggleHover} 
    className={hovered ? classes.trHover : ''}
  >
    <td align="center" className={classes.borderBlack}>{props.date_column}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[0] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[1] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[2] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[3] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[4] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[5] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[6] || ''}</td>
    <td align="center" className={classes.borderBlack}>{props.rowData[7] || ''}</td>
  </tr>
)

实现说明 #

因为date_column是1~31的唯一值，和行一一对应，修改状态时只会更新指定date_column对应的数据，只有目标行的rowData prop会发生变化触发重渲染，不会影响其他行的内容。

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