React.js：取消按钮正在取消编辑，但在编辑开始后保留更改值的状态

如何解决React.js：取消按钮正在取消编辑，但在编辑开始后保留更改值的状态

在我的表单中，默认情况下我显示来自状态的数据，旁边有编辑按钮。单击“编辑”时，会出现一个内联表单来代替数据以及“保存”和“取消”按钮。当按下保存时，状态被更新。但是当按下取消时，输入字段应该会消失，并且会出现之前的状态值。

到目前为止我已经实现了。但是，如果我单击取消，在输入字段中编辑文本后，输入字段将消失，但已编辑的文本会显示未编辑的先前文本应出现的位置。

编辑前：---

编辑期间：---

点击取消后：---

点击取消后，该值应该是IT Service，但它显示的是应该丢弃的编辑值！

如何在点击取消后显示之前的值？

我的代码：

const [ edit,setEdit ] = useState(false);
const [ cancelEdit,setCancelEdit ] = useState(false);
const [ myJob,setMyJob ] = useState('IT Service')
const [ showJob,setShowJob ] = useState('');
const [ saved,setSaved ] = useState(false);

const isEdit = edit;

const handleCancelEdit = () => {
    setCancelEdit(!cancelEdit);
    setEdit(!edit);
};

const handleSave = () => {
    setSaved(!saved);
    setEdit(!edit);
    setShowJob(myJob);
}
return (
    <div>
        <p> Job: 
            <span>
                { !isEdit ? (<span>{ myJob} <button type="submit" onClick={e=>setEdit(!edit)}>Edit</button></span>) :
                (
                    <span>
                        <input type="text" name="myJob" value={myJob}
                            onChange={e=>setMyJob(e.target.value)} />
                        <button type="submit" onClick={handleSave}>Save</button>
                        <button type="submit" onClick={handleCancelEdit}>Cancel</button>
                    </span>
                )}  
            </span>
        </p>
        <h4>Present job: <em>{showJob}</em></h4>
    </div>
);

解决方法

您没有重置输入值。

    const handleCancelEdit = () => {
    setCancelEdit(!cancelEdit);
    setEdit(!edit);
    setMyJob(showJob)
};

,

提出了使用 useRef 的解决方案：

const presentJob = useRef(myJob);

const handleCancelEdit = () => {
    setCancelEdit(!cancelEdit);
    setEdit(!edit);
    setMyJob(presentJob.current);
};

const handleSave = () => {
    setSaved(!saved);
    setEdit(!edit);
    setShowJob(myJob);
    presentJob.current = myJob;
};