背景
所以我有一個簡單的例子，一個 Form 組件（Parent）和多個 Input 組件（Children）。每個單獨的 Input 組件都有一個useState鉤子來初始化和管理其值的狀態。
問題
與大多數表單一樣，我想將所有資料提交到后端進行處理。但是，問題是我無法從每個子輸入組件中檢索值的狀態。
// app.jsx
import Form from "./Form";
export default function App() {
return <Form />;
}
// Form.jsx
import React from "react";
import Input from "./Input";
const handleSubmit = (e) => {
e.preventDefault();
console.log("Wait, how do I retreive values from Children Inputs?");
};
const Form = () => {
console.log("Form render");
return (
<form onSubmit={handleSubmit}>
Sample Form
<Input initial={"username"} name={"user"} />
<Input initial={"email"} name={"email"} />
<button type="submit">Submit</button>
</form>
);
};
export default Form;
// Input.jsx
import React from "react";
import useInputValue from "./useInputValue";
const Input = ({ name, initial }) => {
const inputState = useInputValue(initial);
console.log(`${name}'s value: ${inputState.value}`);
return <input {...inputState} />;
};
export default Input;
合理的解決方案
當然，我可以將 Input 狀態提升到 Form 組件，也許在一個 obj 名稱值中。但是，如果我這樣做，每次更改輸入時，表單都會與所有輸入一起重新渲染。
對我來說，這是一個不受歡迎的副作用。隨著我的表單組件變得越來越大，每次一個輸入更改時重新渲染所有輸入（在表單內）的成本會更高。
因此，我想堅持讓每個單獨的輸入管理自己的狀態的決定，這樣如果一個輸入發生變化，并非所有其他輸入都會與父組件一起重新渲染。
問題
如果每個子組件都管理自己的狀態，父組件是否可以訪問該狀態的值并執行操作（如表單提交）？
uj5u.com熱心網友回復：
我認為是的，您可以共享狀態。還有3個選項：
- 我推薦你使用 Formik 這樣的庫。它將在您的情況下為您提供幫助。
- 您可以使用 useState() 掛鉤作為道具共享狀態。
- 使用 Redux Toolkit（如果我們談論的是記憶）、useContext() 等工具。
uj5u.com熱心網友回復：
如果父母需要了解孩子的狀態，您可以
- 向上移動狀態。這可以通過傳遞子呼叫的 setState 函式來解決（狀態資料在父級中可用）
- 使用背景關系https://reactjs.org/docs/context.html
- 使用狀態管理庫，例如 redux
在你的簡單情況下，我會選擇 1)
uj5u.com熱心網友回復：
如果您想要從輸入中獲取最終值，請將 ref 分配給每個輸入并在提交函式中使用 emailRef.current.value 進行訪問。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/493584.html
標籤：javascript 反应 反应状态管理
上一篇：PythonSeleniumChrome-在抓取WhitePages時，send_keys()在回圈的第二次迭代期間不發送密鑰
下一篇：反應-本地影像不會加載？