React：在 parent 和 child onClick 中更改状态

Question

我有一个用于多项选择题的 parent 组件，它使用 map 为每个答案生成按钮。按钮本身是另一个组件。

我希望能够根据答案是否正确改变每个按钮的颜色，同时也希望能够统计 parent.

中的总尝试次数

使用回调，我可以获得颜色变化或尝试计数，但不能同时获得两者。谁能解释我做错了什么？

Parent

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>
  )
}

Child

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>
  )
};

Answer 1

我认为您想将 ans 传递给按钮内的 onClick 回调。

  const clickHandler = (ans, correct) => {
    setColor(ans === correct ? constants.accentBlue : constants.accentRed)
    props.onClick(ans)
  }

React：在 parent 和 child onClick 中更改状态

React: change a state in parent and in child onClick

callback

onclick

parent-child

reactjs