问题描述
我是新来回应JS的人。 我想在单击“检查统计信息”按钮后显示图形。我可以看到我的函数正在执行,但是如何显示返回的函数呢?由于handleShowStatistics()是一个函数,因此我无法编写render()方法。 这是我的“ Quiz.js”代码
import React,{ Component } from "react";
import { Link } from "react-router-dom";
import "./style.css";
import QuestionBank from "./QuestionBank.js";
import { Pie } from "react-chartjs-2";
class Quiz extends Component {
constructor(props) {
super(props);
this.state = {
userAnswer: null,currentIndex: 0,options: [],data: [],quizEnd: false,score: 0,disabled: true
};
}
loadQuiz = () => {
const { currentIndex } = this.state;
this.setState(() => {
return {
question: QuestionBank[currentIndex].question,options: QuestionBank[currentIndex].options,answer: QuestionBank[currentIndex].answer
};
});
};
nextQuestionHandler = () => {
const { userAnswer,answer,score } = this.state;
if (userAnswer === answer) {
this.setState({
score: score + 1
});
}
this.setState({
currentIndex: this.state.currentIndex + 1,userAnswer: null
});
};
previosQuestionHandler = () => {
// const{userAnswer}=this.state
this.setState({
currentIndex: this.state.currentIndex - 1,userAnswer: null
});
};
componentDidMount() {
this.loadQuiz();
}
checkAnswer = (answer) =>
this.setState({
userAnswer: answer,disabled: false
});
finishHandler = () => {
const { userAnswer,score } = this.state;
if (userAnswer === answer) {
this.setState({
score: score + 1
});
}
if (this.state.currentIndex === QuestionBank.length - 1) {
this.setState({
quizEnd: true
});
}
};
attemptAnotherTry = () => {
this.loadQuiz();
this.setState({
userAnswer: null,disabled: true
});
};
handleShowStatistics = () => {
console.log("fucntion start");
const { data } = this.state;
this.setState({
data: [
{
labels: ["Correct Answers","Incorrect Answers"],datasets: [
{
label: "statistical chart",data: [this.state.score,6 - this.state.score],backgroundColor: ["rgba(255,99,132,1)","rgba(255,205,86,1)"]
}
]
}
]
});
console.log("fucntion end");
return (
<div>
<div
style={{
width: "1000px",height: "1000px",textAlign: "center",marginLeft: "250px"
}}
>
{/* <Pie data={data} options={options}/> */}
<Pie data={data} />
<Link to="/Test" style={{ textAlign: "center" }}>
Attempt test again
</Link>
</div>
</div>
);
};
componentDidUpdate(prevProps,prevState) {
const { currentIndex } = this.state;
if (this.state.currentIndex !== prevState.currentIndex) {
this.setState(() => {
return {
disabled: true,question: QuestionBank[currentIndex].question,answer: QuestionBank[currentIndex].answer
};
});
}
}
render() {
const { question,options,currentIndex,userAnswer,quizEnd } = this.state;
if (quizEnd) {
return (
<div className="containerBox">
<h1> Game Over. Final score is {this.state.score} points</h1>
<p> The correct answers for the quiz are</p>
<ul>
{QuestionBank.map((item,index) => (
<li className="options" key={index}>
{item.answer}
</li>
))}
</ul>
{currentIndex === QuestionBank.length - 1 && (
<button
className="attemptButton"
onClick={this.attemptAnotherTry}
disabled={this.state.disabled}
>
Retest?
</button>
)}
{currentIndex === QuestionBank.length - 1 && (
<button onClick={this.handleShowStatistics}>
Check Statistics
</button>
)}
{/* <globalThis.pieChart/> */}
</div>
);
}
return (
<div className="containerBox">
<div className="title">Quiz </div>
<h2>{question}</h2>
<span>{`Question ${currentIndex + 1} of ${QuestionBank.length}`}</span>
{options.map((option) => (
<p
key={option.id}
className={`options ${userAnswer === option ? "selected" : null}`}
onClick={() => this.checkAnswer(option)}
>
{option}
</p>
))}
{currentIndex < QuestionBank.length - 1 && (
<button
disabled={this.state.disabled}
onClick={this.nextQuestionHandler}
>
Next Question
</button>
)}
{currentIndex < QuestionBank.length - 1 && currentIndex > 0 && (
<button
onClick={this.previosQuestionHandler}
className="previousQuestion"
>
Previous Question
</button>
)}
{currentIndex === QuestionBank.length - 1 && (
<button onClick={this.finishHandler} disabled={this.state.disabled}>
Finish
</button>
)}
</div>
);
}
}
export default Quiz;
请帮助我解决问题。我真的被困在这里,努力显示图表。
解决方法
在渲染中,您可以检查是否有数据并在此处显示统计信息
return (
<div className="containerBox">
{this.state.data && <Statistics data={this.state.data}/>}
...
</div>
)
假设您定义了一个组件统计信息以显示数据
调用setState函数将自动调用render方法
,如果使用单击检查统计信息按钮,则可以将标志状态设置为true。因此,只有在checkStatistics id为true时,它才会出现。
沙盒https://codesandbox.io/s/patient-rgb-z5tkj?file=/src/App.js
类似的东西:
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],checkStatistics: false
};
}
handleShowStatistics = () => {
console.log("fucntion start");
const { checkStatistics } = this.state;
this.setState({
checkStatistics: !checkStatistics
});
console.log("fucntion end");
};
render() {
const { checkStatistics } = this.state;
return (
<div className="containerBox">
<div className="title">Quiz</div>
<h2>Question</h2>
<button onClick={this.handleShowStatistics}>Check Statistics</button>
{checkStatistics && (
<div
style={{
width: "100px",height: "100px",textAlign: "center",marginLeft: "25px"
}}
>
Show this div if checkStatistics is true
</div>
)}
</div>
);
}
}
export default App;