按鈕 onClick 在 Reactjs 中未觸發

Question

按鈕沒有做他們應該做的事情，增加了好的、中性的、壞的反饋。

奇怪的是，我添加了一個默認按鈕，該按鈕使用不同的語法來添加到 bad，並且它可以工作。 所以我的“giveGoodFeedback”功能有問題。

import React, { useState } from 'react'


const Button = (props) => {
  return (
    <button onClick={props.handleClick}>
      {props.text}
    </button>)
}

const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const giveGoodFeedback = () => {
    setGood( good + 1 )
  }

  const giveNeutralFeedback = () => {
    setNeutral( neutral + 1 )
  }

  const giveBadFeedback = () => {
    setBad( bad + 1 )
    console.log('Bad increases')
  }

  return (
    <div>
      <h1>give feedback</h1>
      <Button text='good' onClick={giveGoodFeedback}/>
      <Button text='bad' onClick={giveBadFeedback}/>
      <Button text='neutral' onClick={giveNeutralFeedback}/>
      <button onClick={() => setBad(bad + 1)}>
        Click me
      </button>
      <h1>Statistics</h1>
      <ul>
        <li>good : {good}</li>
        <li>neutral : {neutral}</li>
        <li>bad : {bad}</li>
      </ul>
      code here
    </div>
  )
}

export default App;

Answer 1

因為你使用了不正確的props，應該是props.onClick，請試一試。 稍后謝謝我