我正在做一个练习,需要构建一个简单的测验应用程序,其中包含几个组件(例如“question”、“question-list”和“add-question”),在“add-question”组件中,我有一个表单,用于向列表中添加新问题,并使用我们在课堂上看到的模板,尝试将用户添加的值添加到我的问题列表中,我成功地使用常规参数完成了这一操作,方法是使用与参数名相同的“name”命名相关输入,但我尝试将表单中的一些值传递到“answers”数组中(其中包含“文本”(字符串)、“正确答案”(boolean),我尝试了一些东西,但没有一个工作,最后一个我尝试的作品只为最后一个输入我填写,但不是所有4这是我的代码(包括我的“question”格式、“onChange”函数和表单):
function AddQuestion(props) {
const [question, SetQuestion] = useState({
title: "",
description: "",
answers: [
{ id: 0, text: "", correctAnswer: false }
{ id: 1, text: "", correctAnswer: false },
{ id: 2, text: "", correctAnswer: false },
{ id: 3, text: "", correctAnswer: false }],
clicked: false});
const onChange = (e) => {
let firstAnswer, secondAnswer, thirdAnswer, fourthAnswer;
if (e.target.name === "firstAnswer") {
firstAnswer = e.target.value;
}
if (e.target.name === "secondAnswer") {
secondAnswer = e.target.value;
}
if (e.target.name === "thirdAnswer") {
thirdAnswer = e.target.value;
}
if (e.target.name === "fourthAnswer") {
fourthAnswer = e.target.value;
}
let updated = {...question, answers: {
0: { text: firstAnswer },
1: { text: secondAnswer },
2: { text: thirdAnswer},
3: { text: fourthAnswer}}
};
updated[e.target.name] = e.target.value;
SetQuestion(updated);
};
return (
<div className={style.newQuestionForm}>
<h1>Add a New Question</h1>
<label>Title: <br /> <input type="text" name="title" onInput={onChange}/></label>
<label>Description:<br/><input type="text" name="description" onInput={onChange}/></label>
<label>First Answer:<br /><input type="text" name="firstAnswer" onInput={onChange}/></label>
<label>Second Answer:<br/><input type="text" name="secondAnswer" onInput={onChange}/></label>
<label>Third Answer:<br/><input type="text" name="thirdAnswer" onInput={onChange}/></label>
<label>Fourth Answer:<br/><input type="text" name="fourthAnswer" onInput={onChange}/></label>
<div className={style.btnDiv}>
<button className={style.newQuestionBtn} onClick={() => props.onAdd(question)}>
Add New Question
</button>
</div>
</div>
);
}
1条答案
按热度按时间e0bqpujr1#
尝试将最终对象保存到状态时出现问题。
如您所见,您正在尝试将
answers
从array
转换为dictionary
:此外,您还会丢失更多有关
answers
的信息,如id
和correctAnswer
要解决这个问题,必须继续使用数组而不是字典。
此外,我还改进了将信息保存到状态的逻辑。
我删除了与答案有关的变量,以使用唯一对象
updatedQuestion
。此对象包含状态中的先前值,然后您可以使用条件检查它是哪个答案,并仅更改其文本现在,如果你尝试这种方法,当你向应用程序添加问题时,表单就可以工作了,你只需要一个额外的复选框来选择哪个问题是正确的。
如果你有什么问题就告诉我