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

Posted 2023-02-22

【中文标题】React.js：在更改状态的输入字段中单击取消时如何返回先前的状态值[重复]

【英文标题】：React.js: How to return the previous state value when cancel is clicked in a input field that changes the state [duplicate]

【发布时间】：2021-07-16 22:55:47

【问题描述】：

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

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

这是父级：

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>
  );

那么，如何按 Cancel 并让之前的状态值重新出现在更改后的值之上？

【问题讨论】：

以前的值？还是初始值？

是的，最初填充的状态值。

您以 "Hi There" 发起。你想在取消编辑时使用它吗？

【参考方案1】：

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

【参考方案2】：

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

usePrevious.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>
 ...
)
...
;

现场演示

【讨论】：

点击取消后如何触发？

您可以传递一个处理程序来侦听您的取消按钮上的更改。我将编辑我对此的答案。 :)

@Strange_air 我编辑了，所以你可以看看这是不是你的意思。

【参考方案3】：

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>
  );