我有一個父組件和一個子組件。
- 父組件向子組件發送資料。
- 孩子修改了值，父母應該看到反映的變化。
但是，由于我不了解反應良好的機制，所以有些事情我做得不好。
父組件
function ParentComponent() {
var userName = "Didi";
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} />
</div>
);
}
子組件
function ChildComponent({ userName }) {
const handleChange = (e) => {
userName = e.target.value;
};
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={handleChange} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}
uj5u.com熱心網友回復：
React 無法監控自由變數的變化。您需要將資料存盤在一個狀態中（或使用一些外部系統，如 Redux）。
如果要從不同的組件更改狀態，則需要將更改狀態的函式傳遞給組件。
function ParentComponent() {
const [userName, setUserName] = React.useState("Didi");
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} setUserName={setUserName} />
</div>
);
}
function ChildComponent({ userName, setUserName }) {
const handleChange = (e) => {
setUserName(e.target.value);
};
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={handleChange} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}
uj5u.com熱心網友回復：
嘗試這個：
父組件
function ParentComponent() {
const [username, setUsername] = useState("");
return (
<div className="Parent">
<label>Parent - {username}</label>
<ChildComponent
username={username}
changeUsername={value => setUsername(value)}
/>
</div>
);
}
子組件
function ChildComponent({ username, changeUsername }) {
const handleChange = e => {
changeUsername(e.target.value);
};
return (
<div className="ChildComponent">
<input type="text" value={username} onChange={handleChange} />
<br />
<label>ChildComponent - {username}</label>
</div>
);
}
uj5u.com熱心網友回復：
你必須這樣做：
父組件
import {useState} from 'react';
function ParentComponent() {
const [userName,setUserName]=useState("Didi");
return (
<div className="Parent">
<label>Parent - {userName}</label>
<ChildComponent userName={userName} setUserName={setUserName}/>
</div>
);
}
子組件
function ChildComponent({ userName,setUserName }) {
return (
<div className="ChildComponent">
<input type="text" defaultValue={userName} onChange={(e)=>setUserName(e.target.value)} />
<br />
<label>ChildComponent - {userName}</label>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453267.html
標籤：反应
上一篇：反應背景關系更改未顯示