在react js中编辑表数据

Question

我在React中有一个表。该表从服务器获取数据。当点击表格中的字段时，我需要做一件事。我必须更新信息。

我的表是这样的

<div>
<MDBTable bordered borderColor="primary">
<MDBTableBody>
{tableRows.map((row) => (
<tr
key={row.id}
className={selectedRow === row.id ? "selected" : ""}
onClick={() => handleRowClick(row.id)}
>
<th scope="row">{row.id}</th>
<td>{row.name}</td>
</tr>
))}
</MDBTableBody>
</MDBTable>
</div>

怎么做?我不需要编辑按钮。我只需要编辑当我点击在字段。

Answer 1

获取一个输入字段:

<td><input value={row.name} /></td>

最初，保持禁用，并在onClick事件中更改它。

Answer 2

我使用Ant设计库解决了我的问题，当点击输入字段时，它的工作，我可以更新数据

const {
createRoot
} = ReactDOM;
const {
Button,
Form,
Input,
Popconfirm,
Table
} = antd;
const {
useContext,
useEffect,
useRef,
useState
} = React;;
const EditableContext = React.createContext(null);
const EditableRow = ({
index,
...props
}) => {
const [form] = Form.useForm();
return ( <
Form form = {
form
}
component = {
false
} >
<
EditableContext.Provider value = {
form
} >
<
tr { ...props
}
/> < /
EditableContext.Provider > <
/Form>
);
};
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
...restProps
}) => {
const [editing, setEditing] = React.useState(false);
const inputRef = React.useRef(null);
const form = React.useContext(EditableContext);
React.useEffect(() => {
if (editing) {
inputRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
form.setFieldsValue({
[dataIndex]: record[dataIndex],
});
};
const save = async() => {
try {
const values = await form.validateFields();
toggleEdit();
handleSave({
...record,
...values,
});
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
let childNode = children;
if (editable) {
childNode = editing ? ( <
Form.Item style = {
{
margin: 0,
}
}
name = {
dataIndex
}
rules = {
[{
required: true,
message: `${title} is required.`,
}, ]
} >
<
Input ref = {
inputRef
}
onPressEnter = {
save
}
onBlur = {
save
}
/> < /
Form.Item >
) : ( <
div className = "editable-cell-value-wrap"
style = {
{
paddingRight: 24,
}
}
onClick = {
toggleEdit
} > {
children
} <
/div>
);
}
return <td { ...restProps
} > {
childNode
} < /td>;
};
const App = () => {
const [dataSource, setDataSource] = React.useState([{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
},
{
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
},
]);
const defaultColumns = [{
title: 'name',
dataIndex: 'name',
width: '30%',
editable: true,
},
{
title: 'age',
dataIndex: 'age',
editable: true,
},
{
title: 'address',
dataIndex: 'address',
editable: true,
},
];

const handleSave = (row) => {
const newData = [...dataSource];
const index = newData.findIndex((item) => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
setDataSource(newData);
};
const components = {
body: {
row: EditableRow,
cell: EditableCell,
},
};
const columns = defaultColumns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave,
}),
};
});
return ( <
div >
<
Table components = {
components
}
rowClassName = {
() => 'editable-row'
}
bordered dataSource = {
dataSource
}
columns = {
columns
}
/> < /
div >
);
};
const ComponentDemo = App;

createRoot(mountNode).render( < ComponentDemo / > );