React.js：在更改状态的输入字段中单击取消时如何返回先前的状态值

问题描述

父组件将每个 prop、状态和函数传递给子组件。子组件没有自己的状态或功能。根据表单字段呈现多个相同的子组件。

我想要在每个输入字段旁边有一个取消按钮。现在，编辑输入字段中的值也会改变状态。因此，简单地将取消功能定义为 handleCancelClick = () => {setEdit(false)} 是行不通的。因为，它不会恢复对状态所做的更改。它会让改变的状态值出现。因此，如何在点击 Cancel 后取消所做的编辑并显示原始的先前值？

这是家长：

export default function App() {
    const [about,setAbout] = useState("Hi there");
    ...
   
    const handleUserAbout = (about) => {
      console.log(about); };

    const [isEditFields,setIsEditFields] = useState({});

    const handleSetEdit = (name,isEdit) => {
      setIsEditFields((prev) => ({
        ...prev,[name]: isEdit
      }));
    };

    return (
      <div className="App">
        <EditComponent
            fieldName={"About"}
            value={about}
            inputType={"text"}
            placeHolder={"Enter some info"}
            name={"about"}
            onChange={(e) => setAbout(e.target.value)}
            onSubmit={handleUserAbout(about)}
            isEdit={isEditFields.about}
            setEdit={(isEdit) => handleSetEdit("about",isEdit)}
        />
        <EditComponent
            ...
        />
      </div>
    );
}

还有孩子：

export default function EditProfileComponent({
  fieldName,value,inputType,placeHolder,name,onChange,onSubmit,isEdit,setEdit }) {
  return (
    <p>
      {fieldName}:{" "}
      {value === "" ? (
        <span>
          <input type={inputType} placeholder={placeHolder} name={name} onChange={onChange} />
          <button type="submit" onClick={onSubmit}>Add</button>
        </span>
      ) : !isEdit ? (
        <span>
            {value}<button onClick={() => setEdit(true)}>Edit</button>
        </span>
      ) : (
        <span>
          <input type={inputType} value={value} name={name} onChange={onChange} />
          <button type="submit" onClick={onSubmit}>Save</button>
          <button type="submit" onClick={() => setEdit(false)}>Cancel</button>
        </span>
      )}
    </p>
  );
}

那么，我如何按取消并使之前的状态值重新出现在更改后的值上？

解决方法

你可以使用一个简单的钩子来返回你以前的状态：

使用Previous.js

import { useEffect,useRef } from 'react';

export const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
}

然后简单调用在按钮处理程序中设置上一个状态。

App.js

// ? look here
import {usePrevious} from ".where/ever/you/store/this/usePrevious.js"

const [about,setAbout] = useState("Hi there");
// ? look here
const prevValue = usePrevious(about)
const handleCancel = () => {
  console.log(prevValue);
}
return (
      <div className="App">
        <EditComponent
         ...
            onHandleCancel={handleCancel}
        />
        <EditComponent
            ...
        />
      </div>
    );

EditProfileComponent 文件

...
export default function EditProfileComponent({ onHandleCancel }) {

...

return(
 ...
  <button type="submit" onClick={() => onHandleCancel}>Cancel</button>
 ...
)
...
};

现场演示

,

您需要将之前的 state 值保存在单独的变量中。当用户单击取消按钮时，从该变量中检索该值并将其保存在 state 中。

,

export default function App() {
    const [about,setAbout] = useState("Hi there");
    ...
   
    const handleUserAbout = (about) => {
      console.log(about); };

    const [isEditFields,setIsEditFields] = useState({});
    
    const cancelEdit = () => {
      setAbout("Hi there")
    }
    const handleSetEdit = (name,isEdit) => {
      setIsEditFields((prev) => ({
        ...prev,[name]: isEdit
      }));
    };

    return (
      <div className="App">
        <EditComponent
            fieldName={"About"}
            value={about}
            inputType={"text"}
            placeHolder={"Enter some info"}
            name={"about"}
            onChange={(e) => setAbout(e.target.value)}
            onSubmit={handleUserAbout(about)}
            isEdit={isEditFields.about}
            setEdit={(isEdit) => handleSetEdit("about",isEdit)}
            cancelEdit={cancelEdit}
        />
        <EditComponent
            ...
        />
      </div>
    );
}

export default function EditProfileComponent({
  fieldName,cancelEdit,value,inputType,placeHolder,name,onChange,onSubmit,isEdit,setEdit }) {

  const handleCancel = () => {
    cancelEdit()
  }

  return (
    <p>
      {fieldName}:{" "}
      {value === "" ? (
        <span>
          <input type={inputType} placeholder={placeHolder} name={name} onChange={onChange} />
          <button type="submit" onClick={onSubmit}>Add</button>
        </span>
      ) : !isEdit ? (
        <span>
            {value}<button onClick={() => setEdit(true)}>Edit</button>
        </span>
      ) : (
        <span>
          <input type={inputType} value={value} name={name} onChange={onChange} />
          <button type="submit" onClick={onSubmit}>Save</button>
          <button type="submit" onClick={handleCancel}>Cancel</button>
        </span>
      )}
    </p>
  );
}