如何在React中的Click上将输入值恢复为默认值

Question

我在react钩子中构建了一个数据表。在每一行上，我都允许用户编辑值，并进入我所称的编辑模式，如下所示：

enter const TableRow = (props: any) => {
const [inputs, setInputs] = useState({});
const [editMode, setEditMode] = useState(false)
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setInputs(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
}
const onStartEdit = ()  => setEditMode(true)
const onEditCommit = (event: MouseEvent<HTMLButtonElement>) => {
// console.log('on edit inputs: ', inputs)
// props.updateRow(inputs, props.id)
}
const onCancelEditMode = () =>  setEditMode(false)
return (
<tr>
<td>
<input
disabled={!editMode}
name="merchant"
placeholder="Merchant Name"
type="text"
onChange={handleChange}
defaultValue={props.row.merchant}
/>
</td>
<td>
<input
disabled={!editMode}
name="item"
placeholder="Item"
type="text"
onChange={handleChange}
defaultValue={props.row.item}
/>
</td>
<td>
{props.row.amtCrypto}
</td>
<td>
<input
disabled={!editMode}
name="currency"
placeholder="Currency"
type="text"
onChange={handleChange}
defaultValue={props.row.currency}
/>
</td>
<td>
{props.row.cryptoPrice}
</td>
<td>
<input
disabled={!editMode}
name="amount"
placeholder="Amount(USD)"
type="text"
onChange={handleChange}
defaultValue={props.row.amount}
/>
</td>
<td>
{!editMode &&
<div>
<button
onClick={onStartEdit}
>
Edit
</button>
<button
onClick={onDeleteRow}
>
Delete Row
</button>
</div>
}
{editMode && 
<div>
<button
onClick={onEditCommit}
>
Complete
</button>
<button
onClick={onCancelEditMode}
>
Cancel
</button>
</div>}
</td>
</tr>
)

}

因此，基本上在startEditMode上，我将使字段可编辑，而在cancelEditMode上，我希望锁定字段并将其恢复为默认值。我将如何实现这一点？

Answer 1

首先，您可以将从道具接收的初始值置于输入状态

const [inputs, setInputs] = useState({merchant: props.row.merchant, ...});

您应该使用输入状态的值作为真理的单一来源。

<input
disabled={!editMode}
name="merchant"
placeholder="Merchant Name"
type="text"
onChange={handleChange}
value={inputs.merchant}
/>

当调用onCancelEditMode函数时，您可以使用props 中的初始值设置输入状态

const onCancelEditMode = () =>  {
setEditMode(false)
setInput({merchant: props.row.merchant, ...})
}