map我有一個用于為每個答案生成按鈕的多項選擇題的父組件。按鈕本身是另一個組件。
我希望能夠根據答案是否正確來更改每個按鈕的顏色，還希望能夠計算父級內部的總嘗試次數。
使用回呼，我可以獲得顏色變化或嘗試計數，但不能同時獲得兩者。誰能解釋我做錯了什么？
家長
const MCQuiz = (props) => {
const [answer, setAnswer] = React.useState('');
const [attempts, setAttempts] = React.useState(0)
const renderFeedback = (ans) => {
if (ans === props.question[props.questionNumber].correct) {
return "yes"
} else if (ans === '') {
return ''
} else {
return "no"
}
}
const parentOnClick = (ans) => {
setAnswer(ans)
setAttempts(attempts 1)
}
return (
<div className={styles.question}>
<h2>{props.question[props.questionNumber].desc}</h2>
<ol>
{props.question[props.questionNumber].options.map((ans) => {
return (
<li key={uuid()} className={`${styles.questionItem}`}>
<MCButton
ans={ans}
correct={props.question[props.questionNumber].correct}
onClick={parentOnClick}
name={ans}
/>
</li>
)
})}
</ol>
<span>{renderFeedback(answer)}</span>
<br />
<p>attempts: {attempts}</p>
</div>
)
}
孩子
const MCButton = (props) => {
const [color, setColor] = useState(constants.accentBrown)
const clickHandler = (ans, correct) => {
ans === correct ? setColor(constants.accentBlue) : setColor(constants.accentRed);
props.onClick()
}
return (
<button
className={styles.answerButton}
style={{ backgroundColor: color }}
onClick={() => clickHandler(props.ans, props.correct)}
>
{props.name}
</button>
)
};
uj5u.com熱心網友回復：
我認為您想將 ans 傳遞給按鈕內的 onClick 回呼。
const clickHandler = (ans, correct) => {
setColor(ans === correct ? constants.accentBlue : constants.accentRed)
props.onClick(ans)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479165.html