在取消点击无法在我的反应应用程序中设置以前的数据

Question

我已经从 JSON 数据创建了动态字段，并且我在 UI 上成功呈现

• 最初所有字段都被禁用。
• 单击编辑后，我正在使特定行可编辑，这工作正常
• 点击取消我想要做的是再次禁用字段，它应该采用以前的（初始值）

问题

当我点击取消时，我正在设置初始数据老化但它没有使用，我正在使用react-form-hook 进行表单验证，我们有reset() 功能但它也不起作用。

我正在做的是

从主组件获取数据并将其设置为如下状态变量

    useEffect(() => {
    if (li) {
      setdisplayData(li);
      setCancelData(li);
    }
  }, [li]);

• 现在使用displayData 来渲染元素

  点击Edit我正在这样做

  常量编辑 = () => { 设置禁用（假）； };

点击取消后我在下面做

const cancel = () => {
    setdisabled(true); //disbaled true
    console.log(cancelData);
    setdisplayData(cancelData); setting my main data back to previous one
    reset(); // tried this reset of react hook form but it did not work
  };

我正在使用defaultValue，所以当我点击编辑时，该字段应该允许我进行编辑。

Here is my full working code

Answer 1

为了解决此问题，我将您的代码更改为使用 value 而不是 defaultValue。另外添加了一个onChange 事件处理程序，它在<input> 更改值时更新displayData 状态。此外，您根本不需要 cancelData 状态，因为 li 属性具有原始值。

现在，当触发取消按钮的onClick 时，它会将displayData 状态的值重置为li 原来的值。这是修改后的代码：

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

function component({ li, index }) {
  const [disabled, setdisabled] = useState(true);
  const [displayData, setdisplayData] = useState(null);
  const { register, reset, errors, handleSubmit, getValues } = useForm();

  useEffect(() => {
    if (li) {
      setdisplayData(li);
    }
  }, [li]);

  const Edit = () => {
    setdisabled(false);
  };

  const cancel = () => {
    setdisabled(true);
    console.log(li);
    // Reset displayData value to li
    setdisplayData(li);
    reset();
  };
  return (
    <div>
      <div>
        {disabled ? (
          <button className="btn btn-primary" onClick={Edit}>
            Edit
          </button>
        ) : (
          <button className="btn btn-warning" onClick={cancel}>
            Cancel
          </button>
        )}
      </div>
      <br></br>

      {displayData !== null && (
        <>
          <div className="form-group">
            <label htmlFor="fname">first name</label>
            <input
              type="text"
              name="fname"
              disabled={disabled}
              value={displayData.name}
              // Update displayData.name everytime value changes
              onChange={({ target: { value } }) =>
                setdisplayData((prev) => ({ ...prev, name: value }))
              }
            />
          </div>
          <div className="form-group">
            <label htmlFor="lname">last name</label>
            <input
              type="text"
              name="lname"
              disabled={disabled}
              value={displayData.lname}
              // Update displayData.lname everytime value changes
              onChange={({ target: { value } }) =>
                setdisplayData((prev) => ({ ...prev, lname: value }))
              }
            />
          </div>
        </>
      )}

      <hr></hr>
    </div>
  );
}

export default component;

希望这会有所帮助。如果仍然不清楚，请发表评论:)