React 18+Material UI 5表格如何根据选中数据预填充表单字段？

你可以通过给TextField添加value属性，结合selectedData.find()匹配对应id的项来实现预填充。具体修改如下：

在map循环内部先找到当前item对应的已选中数据项，再将其对应的值赋值给TextField的value属性（注意替换成你实际存储选中值的字段名，比如value、amount等）：

<TableBody>
    {data.map((item) => {
        // 匹配当前item对应的已选中数据
        const matchedSelectedItem = selectedData.find(existingItem => existingItem.id === item.id);
        // 提取预填充的值，找不到则设为空字符串
        const prefilledValue = matchedSelectedItem?.yourValueField || '';
        
        return (
            <TableRow key={item.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                <TableCell component="th" scope="row">{item.name}</TableCell>
                <TableCell component="th" scope="row">
                    <TextField 
                        onChange={(e) => handleItem(e, item.id)} 
                        sx={{ maxWidth: 50 }}
                        value={prefilledValue} // 设置预填充值
                    />
                </TableCell>
            </TableRow>
        )
    })}
</TableBody>

关键说明 #

• 使用可选链操作符?.避免找不到匹配项时出现undefined报错；
• 若selectedData中没有对应id的项，prefilledValue会设为空字符串，保证TextField的value始终是有效值；
• 确保handleItem函数在更新选中数据时，正确维护selectedData的状态，这样后续渲染才能同步更新预填充内容。

内容的提问来源于stack exchange，提问作者G. Ball