請檢查此代碼https://stackblitz.com/edit/react-koqfzp?file=src/Section.js
每次我添加一個專案時，我也會添加一個我想要編輯的亂數。該數字在 MUI 文本欄位組件中呈現。
<TextField
type="number"
variant="standard"
aria-readonly={edit === true ? false : true}
value={edit === true ? value : numbers[i]}
onChange={(e) => setValue(e.target.value)}
/>
并且按鈕是根據編輯的狀態呈現的，如下所示：
{edit === true ? (
<button onClick={() => saveEdit(i)}>Save</button>
) : (
<button onClick={() => setEdit(true)}>Edit</button>
)}
它正在作業，我可以編輯它并使用新值重新渲染，問題是當我單擊編輯按鈕時，每個欄位都會收到新的輸入值并且保存按鈕會顯示在每個欄位中，但是當我保存它時，它恢復到原來的值。除了一個特定的領域，我怎么能做我正在做的事情？
uj5u.com熱心網友回復：
問題是您使用 setEdit 作為布林值
您可以將其定義為要編輯的陣列的索引，以 -1 作為起始值
const [edit, setEdit] = useState(-1)
...
{edit === i ? (
<button onClick={() => saveEdit(i)}>Save</button>
) : (
<button onClick={() => setEdit(i)}>Edit</button>
)}
uj5u.com熱心網友回復：
我建議創建另一個組件示例：Item 有它自己的狀態編輯、值狀態并將所需的道具傳遞給它，它們是值、數字、saveEdit(index,newValue)、removeItem(index) 以及索引
saveEdit 必須通過傳遞索引和 newValue 在部分中進行更改
我希望這對你來說清楚
uj5u.com熱心網友回復：
在組件中添加地圖值并在組件內添加狀態，這樣每個組件都會有多個狀態，而不僅僅是 1
{section.items.map((item, i) => (
<Component key={i} item={item}/>
)}
const Component = ({ section, addItem, removeItem}) => {
const [newItem, setNewItem] = useState('');
const [edit, setEdit] = useState(false);
const [value, setValue] = useState(0);
const [numbers, setNumbers] = useState(section.number);
const handleChange = (e) => {
setNewItem(e.target.value);
};
..................
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/461596.html
標籤：javascript 反应 材料-ui