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

Posted 2023-02-21

【中文标题】如何在 React 中将输入值恢复为默认值 onClick？

【英文标题】：How do I revert input values back to default values onClick in React?

【发布时间】：2021-12-30 12:49:11

【问题描述】：

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

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 上，我想锁定字段并将它们恢复为默认值。我将如何实现它？

【问题讨论】：

开始编辑时 - 您需要将所有以前的值存储（锁定）在另一个变量中。当您需要重置/取消编辑时 - 您需要获取用户已编辑的当前值，并将其替换为以前的值。

【参考方案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, ...)

【讨论】：

感谢您的建议。但是，鉴于我的 handleChange 方法在用户键入后更新状态，这似乎不起作用。因此，当我取消编辑模式时，它会恢复为用户刚刚输入的内容。

假设 props.row.merchant 在用户进入“编辑模式”和点击“取消编辑模式”之间没有改变，或者 TableRow 组件没有被卸载，你应该能够设置输入() 在 onCancelEditMode 中使用来自道具的值，因为它们没有改变。否则，您可以在安装此组件时使用另一个状态来存储初始值，例如const [initialInputValues, setInitialInputValues] = useState(merchant: props.row.merchant, ... )。并在 onCancelEditMode setInput(...initialInputValues) 上。希望这是有道理的