如果你在表格中想要编辑某一行的数据,可以通过以下步骤来获取该行的值:
- 创建一个 state 来存储选中的行数据。例如,你可以使用
useState
钩子创建一个名为selectedRow
的状态变量。
const [selectedRow, setSelectedRow] = useState();
在表格组件中,使用 rowSelection
配置项启用选择功能,并指定 onChange
回调函数来捕获选中行的数据。在回调函数中,将选中的行数据存储在 selectedRow
状态变量中。
function YourTable() { const columns = [ // 列配置项 ]; function handleRowSelection(selectedRowKeys, selectedRows) { setSelectedRow(selectedRows[0]); } return ( <Table // 表格数据源和列配置项 rowSelection={{ // 启用选择功能 type: 'radio', // 指定选中行数据的回调函数 onChange: handleRowSelection, }} /> ); }
在编辑操作中,使用 selectedRow
变量引用选中的行数据并进行修改。例如,你可以在弹出的表单中将该行的原始数据填充到表单中,让用户进行编辑。
function YourEditModal() { function handleEdit() { // 使用 selectedRow 引用选中的行数据 console.log('正在编辑的数据:', selectedRow); // 打开编辑表单等操作 } return ( <Button onClick={handleEdit}>编辑</Button> ); }