如何在React中从动态表格获取单条行数据并传递给处理函数

根因排查 #

你遇到的报错和功能问题主要来自4个错误点：

• 函数作用域问题：如果你用的是函数式组件，直接写edit = (data) => {}属于类组件的语法，函数组件内必须加const声明变量，否则JS会把edit识别为未定义的全局变量，调用时就会出现类型报错；如果你用的是类组件，则要确保edit方法绑定了正确的this，比如在构造函数里bind或者用箭头函数类方法。
• 打印逻辑为空：你现在edit函数里的console.log()没有传入参数，自然无法输出行数据。
• 筛选逻辑错误：search == []的判断永远不成立，JS中数组是引用类型，不能直接用==判断是否为空，要判断长度search.length === 0。
• 输入框未绑定状态：你表格里的Number和Round两个输入框没有绑定状态，点击按钮时无法拿到用户输入的补充参数。

修复步骤 #

1. 在组件内声明输入框的状态存储，每一行的输入值要和行id绑定
2. 修正edit函数的声明和打印逻辑
3. 修正filter的判断逻辑
4. 给TextField绑定onChange事件同步输入值到状态

修改后参考代码 #

// 如果你是函数组件，首先引入useState
import { useState } from 'react'

// 组件内部
const YourComponent = () => {
  const [loading, setLoading] = useState(false)
  const [inputValues, setInputValues] = useState({}) // 存储每行的输入值，key为行id
  const product = [] // 你的接口返回的列表数据，这里替换成你自己的逻辑
  const search = [] // 你的搜索参数，替换成自己的逻辑

  // 修正edit函数的声明
  const edit = (data) => { 
    // 合并原有行数据和用户输入的补充参数
    const submitData = {
      ...data,
      number: inputValues[data.id]?.number || '',
      round: inputValues[data.id]?.round || ''
    }
    console.log('当前行完整参数：', submitData)
    // 后续调用第二个接口的逻辑写在这里
  }  

  // 输入框值变化的同步逻辑
  const handleInputChange = (rowId, field, value) => {
    setInputValues(prev => ({
      ...prev,
      [rowId]: {
        ...prev[rowId],
        [field]: value
      }
    }))
  }
             
  return (
    <div className="App">
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="customized table">
          <TableHead>
            <TableRow>
              <TableCell>Horse Name(ENG)</TableCell>
              <TableCell>Owner</TableCell>
              <TableCell>Microchip id</TableCell>
              <TableCell>Number</TableCell>
              <TableCell>Round</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {product
              .filter((item) => {
                // 修正筛选逻辑
                if (search.length === 0) {
                  return true
                }
                // 这里补充你原本的搜索筛选逻辑，比如匹配名称之类的
                return item.nameEn.includes(search)
              })
              .map((item) => {
                return (
                  <TableRow key={item.id}>
                    <TableCell component="th" scope="row">
                      {item.nameEn}
                    </TableCell>
                    <TableCell component="th" scope="row">
                      {item.owner}
                    </TableCell>
                    <TableCell component="th" scope="row">
                      {item.chipNumber}
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <TextField 
                        label="number" 
                        variant="standard" 
                        value={inputValues[item.id]?.number || ''}
                        onChange={(e) => handleInputChange(item.id, 'number', e.target.value)}
                      />
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <TextField 
                        label="Round" 
                        variant="standard" 
                        value={inputValues[item.id]?.round || ''}
                        onChange={(e) => handleInputChange(item.id, 'round', e.target.value)}
                      />
                    </TableCell>
                    <TableCell component="th" scope="row">
                      <Button variant="primary"
                        value={loading ? 'Loading...' : 'Publish'}
                        onClick={() => edit(item)}
                        disabled={loading}>Add to round</Button>
                    </TableCell>
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

export default YourComponent

效果验证 #

修改后点击每行的Add to round按钮，控制台就会输出当前行的原有参数+用户输入的补充参数，你可以直接取对应字段调用第二个提交接口即可。

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