我正在創建一個表單并從 mui 文本欄位中獲取輸入。我將文本欄位的值存盤到一個值物件中。我創建了一個 onValueChanged 函式來存盤表單欄位的鍵和值。我想在文本欄位中顯示當前值并將其保存到 useState 常量值。有沒有其他方法可以實作這一目標？event.target 的基本結構是什么？
它給出了一個錯誤
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
表格圖片
代碼片段是 -
const [value, setValue] = React.useState({
practiceSetName: "",
grade: "",
subject: "",
level: "",
correctMarks: "",
topic1: "",
topic2: "",
topic3: "",
incorrectMarks: "",
timeLimit: "",
exam: "",
difficultyLevel: "",
instructions: "",
questions: "",
});
const handleChange = (event) => {
const [name, value] = event.target; //this line is giving error
setValue(...value, ([name] = value));
preferences = value;
console.log("changed Data");
console.log(value);
console.log(value.questions);
handleClose();
};
<TextField
autoFocus
margin="dense"
required
id="name"
label="Practise Set Name"
value={value.practiceSetName}
type="string"
fullWidth
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
required
id="grade"
value={value.grade}
label="Grade"
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="subject"
value={value.subject}
label="Subject"
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="topic1"
value={value.topic1}
label="Topic 1"
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="timeLimit"
value={value.timeLimit}
label="Time limit in minutes"
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="topic2"
label="Topic 2"
value={value.topic2}
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="topic3"
label="Topic 3"
value={value.topic3}
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
required
margin="dense"
id="level"
label="Difficulty level"
value={value.level}
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="exam"
label="Exam"
value={value.exam}
variant="standard"
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="instructions"
label="Instructions"
value={value.instructions}
variant="standard"
multiline
fullWidth
maxRows={4}
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="correctMarks"
label="Marks for correct answer"
variant="standard"
value={value.correctMarks}
onChange={handleChange}
/>
<TextField
autoFocus
margin="dense"
id="wrongMarks"
label="Marks for incorrect answer"
variant="standard"
value={value.incorrectMarks}
onChange={handleChange}
/>uj5u.com熱心網友回復：
event.target是一個物件，要解構名稱和值使用{ name, value }，設定新狀態是通過這種方式完成的
setValue({
...value,
[name]: value
})
所以你的最終代碼應該是這樣的
const handleChange = (event) => {
const { name, value: eventValue } = event.target; //this line is giving error
// renamed to eventValue because value is already defined
// in useState
setValue({ ...value, [name]: eventValue });
preferences = value;
console.log("changed Data");
console.log(value);
console.log(value.questions);
handleClose();
};
uj5u.com熱心網友回復：
我認為這里的錯誤是你正在解構一個物件而不是一個陣列
const handleChange = (event) => {
const {name, value} = event.target; //this line is giving error
};
// when you are working with object {} when you are working with arrays []
const arr = ["Maria","juan"]
const [firstName] //this will be "Maria"
const {name} = {name: "Maria"} // this will be maria
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408468.html
標籤：