由于我的表格很大，所以我在這里粘貼一小部分代碼以便更好地理解。
當我選擇username從select field再下一個殘疾人field dob必須先填充。所以它作業正常。
但問題是在我的表單中，我有一個名為的選項partial save button，它將保存在local storage. 但是當我們重繪 頁面時，它不會填充到 dob 欄位。
為了解決這個問題，我將 value 屬性更改為defaultValuethen 它將填充資料但無法設定 value 時onchange select triggers.
即使我同時嘗試了 defaultValue 和 value 屬性然后我得到錯誤說
index.js:1 警告：MuiOutlinedInputInput 包含一個帶有 value 和 defaultValue 屬性的 text 型別的輸入。輸入元素必須是受控或不受控的（指定 value 屬性或 defaultValue 屬性，但不能同時指定兩者）。決定使用受控或不受控的輸入元素并洗掉這些道具之一。更多資訊：https : //reactjs.org/link/controlled-components
<FormControl >
<InputLabel id="userLabel" >Username</InputLabel>
<Select
labelId="userLabel"
id="userLabelId"
MenuProps={MenuProps}
label="Username"
name="userName"
onChange={(e) => {
handleChange(e);
}}
value={userDetail.userName ?? ''}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{userList ? userList.map((user) => (
<MenuItem key={user.id} value={user.id ?? ''}>
{user.userName}
</MenuItem>
)) : null}
</Select>
</FormControl>
<TextField
margin="normal"
required
id="dob"
label="Date Of birth"
name="dob"
value={userDetail.dob ?? ''}
disabled
/>
uj5u.com熱心網友回復：
所以，這就是正在發生的事情。當你說userDetail.dob ?? ''和userDetails.dob == null，然后你告訴這個組件“請保持自己的狀態。”
所以組件說“沒問題，我將成為一個不受控制的組件”。
然后你稍后對組件說，也就是說userDetails != null，“我正在為你提供一個值”& 組件說“等一下，我是一個不受控制的組件，你不能讓我成為一個受控組件”。
因此，首先通過提供一個空字串來控制它。
uj5u.com熱心網友回復：
Select 的值和 menuitem 的值必須匹配。所以你必須使用用戶名。
{userList ? userList.map((flock) => (
<MenuItem key={flock.id} value={flock.userName ?? ''}>
{flock.userName}
</MenuItem>
)) : null}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405734.html
標籤：