如何在 table 中为 React JS 中的特定 ID 动态插入输入数据？

Question

[在此我想将每个单元格的标记、id、名称的值存储在数组的对象中.. 我尝试了但没有得到正确答案请帮助我如何在数组对象中存储每个单元格的标记和 ID

const [values, setValues] = useState(new Array(tableData.length).fill(''));

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
      <TableHead>
        <TableRow>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Roll Number
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Name
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Email
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Marks
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {tableData.map((data, index) => (
          <>
            <TableRow>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  key={index}
                  type={'text'}
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values[index]}
                  onChange={(e) => {
                    setValues(e.target.value);
                  }}
                />
              </TableCell>
            </TableRow>
          </>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

[1]: https://i.stack.imgur.com/oGvYW.png![enter image description here](https://i.stack.imgur.com/usHRa.png)

Answer 1

您应该仅为父 TableRow 元素设置 key 属性
您可以将 values 状态初始化为 { id, value } 形式的对象，并更新与已更改的 id 对应的值。此配置应防止由于 table 过滤和索引不匹配而导致的潜在错误：

const [values, setValues] = useState(tableData.map(data => ({ id: data.id, value: ''})));

const handleValueChange = (e, id) => {
    const otherValues = values.filter(v => v.id !== id);
    const updatedValue = { id, value: e.target.value };
    setValues({ ...otherValues, updatedValue })
}

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
        ...
      <TableBody>
        {tableData.map((data, index) => (
            <TableRow key={data.id}>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  type='text'
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values.find(v => v.id === data.id)?.value || ''}
                  onChange={(e) => { handleValueChange(e, data.id); }}
                />
              </TableCell>
            </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

如何在 table 中为 React JS 中的特定 ID 动态插入输入数据？

How to insert the input data dynamically in table for particular ID in react JS?

html

javascript

reactjs

material-ui

material-table