【发布时间】：2021-02-26 21:28:27
【问题描述】：
我很欣赏这个问题可能会保证回答太长，但我真的很难弄清楚如何使我的 React 应用程序正常工作。以下是我正在尝试做的事情以及我坚持的事情！
我正在创建一个测验平台，您可以在其中构建和玩由您和您的朋友制作的测验。您应该能够添加任意数量的问题，并且每个问题最多可以添加四个答案。下面是一张突出显示我目前正在开发的基本测验生成器的图片。
到目前为止，我能够创建尽可能多的问题，并且能够创建尽可能多的答案，但是我真的很难为问题和答案设置删除按钮，以便删除相应的问题或答案.
以下是我现有的代码。我有 3 个组件， , , .
测验生成器
import React from 'react';
import 'material-icons';
import '../css/addQuestion.css';
import AddTextQuestion from './addTextQuestion.js';
class QuizBuilder extends React.Component {
constructor(props) {
super(props);
this.state = {
noQuestions: 0,
};
this.addTextQuestion = this.addTextQuestion.bind(this);
}
addTextQuestion() {
this.setState({
noQuestions: this.state.noQuestions + 1,
});
}
render() {
let children = [];
for(let i = 0; i < this.state.noQuestions; i++) {
children.push(<AddTextQuestion key={i} qNo={i + 1}/>);
}
return (
<div>
<h2 className="builderHeader">Quiz Builder</h2>
<div className="questionDiv" id="newQuestionContainer"></div>
<form className="addQForm">
{children}
</form>
<button type="button" id="addQuestion" onClick={this.addTextQuestion}>
<i className="material-icons">add</i>
Question
</button>
</div>
);
}
}
export default QuizBuilder;
添加文本问题
import React from 'react';
import '../css/addQuestion.css';
import AnswerText from './answerText.js';
class AddTextQuestion extends React.Component {
constructor(props) {
super(props);
this.state = {
noAnswers: 0,
};
this.addAnswer = this.addAnswer.bind(this);
this.deleteAnswer = this.deleteAnswer.bind(this);
}
addAnswer() {
this.setState({
noAnswers: this.state.noAnswers + 1,
});
}
deleteAnswer(num) {
delete this.answers[num];
this.setState({
noAnswers: this.state.noAnswers - 1,
});
}
render() {
const answerButton = this.state.noAnswers < 4 ?
<button type="button" onClick={this.addAnswer}><i className="material-icons">add</i>Answer
</button> : <button type="button">Max of 4 answers</button>;
let answers = [];
for(let i = 0; i < this.state.noAnswers; i++) {
answers.push(<div key={i}>
<AnswerText qNo={i + 1}/>
<button type="button" id={`delet_${i}`} onClick={}>X</button>
{console.log(i)}
</div>);
}
return (
<div className="qContainer">
<div className="questionContainer containers">
<h3 className="qNo">Question {this.props.qNo}</h3>
<div className="input">
<label htmlFor="question">Question</label>
<input name="question" type="text" id="question"></input>
</div>
</div>
<div className="answerContainer containers">
{answers}
{answerButton}
</div>
</div>
);
}
}
export default AddTextQuestion;
AnswerText
import React from 'react';
class AnswerText extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="input">
<label htmlFor="answer1">Answer {this.props.qNo}</label>
<input name="answer1 " type="text" id={`answer_${this.props.qNo}`}></input>
<input type="radio" name="answerCheck" id="answerCheck"></input>
</div>
);
}
}
export default AnswerText;
对于如何最好地解决这个问题，我们将不胜感激。这是最令人沮丧的！
【问题讨论】：
-
由于某种原因，一些代码似乎已经消失了，但希望你们能明白其中的要点。
标签： javascript reactjs react-native components frontend