我正在嘗試重寫 CV React 應用程式，以便它使用 Hooks。我在下面有這個代碼：
const App = () => {
const [values, setValues] = useState({
name: "",
email: "",
phone: "",
schoolName: "",
studyTitle: "",
completion: "",
studyStartDate: "",
studyEndDate: "",
companyName: "",
positionTitle: "",
mainTasks: "",
isFormSaved: false,
btnText: "Save info"
});
const handleButtonClick = () => {
setValues({
isFormSaved: !values.isFormSaved
});
if (!values.isFormSaved) {
setValues({ btnText: "Edit info" });
} else {
setValues({ btnText: "Save info" });
}
};
const handleChange = (e) => {
setValues({ ...values, [e.target.name]: e.target.value });
};
const overview = (
<section className="overview">
<Overview data={values} />
</section>
);
const form = (
<section className="editInfo">
<GeneralInfo
onChange={handleChange}
disabled={values.isFormSaved}
placeholder={values}
/>
<Experience
onChange={handleChange}
disabled={values.isFormSaved}
placeholder={values}
/>
<Practice
onChange={handleChange}
disabled={values.isFormSaved}
placeholder={values}
/>
</section>
);
return (
<div className="app">
<h1>CV Application</h1>
{values.isFormSaved ? overview : form}
<button onClick={handleButtonClick}>{values.btnText}</button>
</div>
);
};
export default App;
我在頁面渲染方面遇到了麻煩。該按鈕有效但所需的效果 - 預覽站點的渲染不起作用。我懷疑問題出在上面的 App.js 代碼中。
預先感謝您的任何幫助。
uj5u.com熱心網友回復：
更改按鈕文本時，您當前正在覆寫所有值。您可能只是將您的 React 組件代碼從字面上翻譯為鉤子。useEffect與 不完全相同setState，它總是寫入整個值，因為它用于狀態變數，而不是整個狀態。
不過很容易修復：
if (!values.isFormSaved) {
setValues(values => ({ ...values, btnText: "Edit info" }));
} else {
setValues(values => ({ ...values, btnText: "Save info" }));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363230.html
標籤：javascript html 反应
上一篇：禁用按鈕直到功能完成