如何在 React 中将输入值恢复为默认值 onClick？

Question

我有一个内置在反应钩子中的数据表。在每一行上，我都允许用户编辑值并输入我所称的编辑模式，如下所示：

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

首先你可以把从 props 接收到的初始值放入输入状态

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, ...})
}