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

Answer 2

为了重置表单，您可以使用

useRef

钩子。

const ResetFormExample = () => {
    // Pass this ref to the form Element
    const ref = useRef<HTMLFormElement>(null);

    return (
        <form ref={ref}>
            <input
                name="email"
                defaultValue="[email protected]"
            />

            {/* Reset button to revert input to the defaultValue */}
            <button
                // Onclick we reset the form using ref
                onClick={() => ref.current?.reset()}
            >
                Reset
            </button>

            <button type="submit" >
                Submit
            </button>
        </form>
    )
}