React Hooks表格场景下点击取消编辑如何恢复输入框默认值

核心逻辑说明 #

你现在的实现存在两个问题导致取消编辑无法恢复原值：

1. 输入框目前是非受控组件，defaultValue仅在组件首次渲染时生效，后续状态变更不会触发输入框内容更新
2. 取消编辑时仅关闭了编辑模式，没有清空存储用户修改值的inputs状态

修改步骤 #

• 第一步：将输入框改为受控模式，value属性优先读取inputs里的修改值，没有修改时默认读取props.row的原始值
• 第二步：进入编辑模式时，先把当前行的原始值同步到inputs状态，避免未修改就提交时空值的问题
• 第三步：取消编辑时，除了关闭编辑模式，额外把inputs重置为空对象，此时输入框会自动回退到原始值

完整修改后代码 #

import { useState, ChangeEvent, MouseEvent } from 'react';

const TableRow = (props: any) => {
  const [inputs, setInputs] = useState<Record<string, string>>({});
  const [editMode, setEditMode] = useState(false);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputs(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
  };

  const onStartEdit = () => {
    // 进入编辑时先同步当前行原始值到状态
    setInputs({
      merchant: props.row.merchant,
      item: props.row.item,
      currency: props.row.currency,
      amount: props.row.amount
    });
    setEditMode(true);
  };

  const onEditCommit = (event: MouseEvent<HTMLButtonElement>) => {
    // console.log('on edit inputs: ', inputs)
    // props.updateRow(inputs, props.id)
    // 提交完成后也可以清空inputs+关闭编辑
    setInputs({});
    setEditMode(false);
  };

  const onCancelEditMode = () => {
    setEditMode(false);
    // 取消时清空修改的状态，触发输入框回退到原始值
    setInputs({});
  };

  // 补充原代码缺失的onDeleteRow方法
  const onDeleteRow = () => {
    // props.deleteRow(props.id)
  };

  return (
    <tr>
      <td>
        <input
          disabled={!editMode}
          name="merchant"
          placeholder="Merchant Name"
          type="text"
          onChange={handleChange}
          // 改为受控value，优先取inputs里的修改值，没有则用原始值
          value={inputs.merchant ?? props.row.merchant}
        />
      </td>
      <td>
        <input
          disabled={!editMode}
          name="item"
          placeholder="Item"
          type="text"
          onChange={handleChange}
          value={inputs.item ?? props.row.item}
        />
      </td>
      <td>
        {props.row.amtCrypto}
      </td>
      <td>
        <input
          disabled={!editMode}
          name="currency"
          placeholder="Currency"
          type="text"
          onChange={handleChange}
          value={inputs.currency ?? props.row.currency}
        />
      </td>
      <td>
        {props.row.cryptoPrice}
      </td>
      <td>
        <input
          disabled={!editMode}
          name="amount"
          placeholder="Amount(USD)"
          type="text"
          onChange={handleChange}
          value={inputs.amount ?? 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>
  )
}

内容的提问来源于stack exchange，提问作者LDB