我想通过事件进行更改,以便用户可以直接修改表中的值。 当前数据与MongoDB链接。 但是,如果在当前TextField中发生onchange事件,则其值将不会正常更改。 我们应该如何解决?
我试图通过将事件声明为函数而不是变量来绑定事件,但是它没有用。
const handleChange = (e, name, i) => {
const { value } = e.target;
this.setState(state => ({
data: state.data.map(
(row, j) => (j === i ? { ...row, [name]: value } : row)
)
}));
};
const row = (
x,
i,
header,
startEditing,
editIdx,
handleChange,
handleRemove,
stopEditing
) => {
let currentlyEditing = editIdx === i;
return (
<TableRow key={`tr-${i}`} selectable= 'false'>
{header.map((y, k) => (
<CustomTableCell key={`trc-${k}`}>
{currentlyEditing ?
<TextField
name={y.prop}
onChange={e => handleChange(e, y.prop, i)}
value={x[y.prop]}
/>
:
x[y.prop]
}
</CustomTableCell>
))}
<CustomTableCell>
{currentlyEditing ? (
<CheckIcon onClick={() => stopEditing()} />
) : (
<EditIcon onClick={() => startEditing(i)} />
)}
</CustomTableCell>
<CustomTableCell>
<TrashIcon onClick={() => handleRemove(x)}/>
</CustomTableCell>
</TableRow>
);
};
我认为代码现在似乎可以更改数组的值。 但是,数据是从MongoDB传递到对象的。 那么,如果需要更改对象中该行中字段的值怎么办?