昨天講了其實Props也可以修改，而在改Props的時候，我略過了一個事件沒有談，今天就來講講react的事件吧！

在原生js裡面，我們有三種方法可以綁定事件。

1. 使用addEventListener
2. 使用.onclick
3. 在html標籤內，加上onclick="function()"

前面兩種，都需要透過Document.getElementById()或是Document.querySelector()，只有最後一種，因為是直接寫在html標籤內，所以直接呼叫函式了。

猶記得我剛開始學的時候，老師們都推薦addEventListener(原因就請大家google了)，而react卻建議我們將事件直接寫在標籤內，Why？

我也不知道哈哈哈哈哈哈哈

文件是這樣說的，顯然沒有解釋到問題。

當使用 React 時，你不需要在建立一個 DOM element 後再使用 addEventListener 來加上 listener。你只需要在這個 element 剛開始被 render 時就提供一個 listener。

不過我個人的猜測是因為react不希望我們頻繁的操作dom，吧？
(有時候我們就是會在心中留下一些疑問，然後忘記)

綁定一個事件

那麼，我們就來綁定一個事件吧，一樣，可以參考codePen，也可以快速掠過長長的程式碼。

class App extends React.Component {
  render() {
    return (
      <div>
        <p onClick={addMoney}>更多錢</p>
      </div>
    )
  }
}
function addMoney() {
  console.log('加上一百元')
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App/>,
);

1. 剛剛說了，要綁定一個事件，那麼我就先把事件寫出來，所以我建立了一個叫做addMoney()的function。

function addMoney() {
  console.log('加上一百元')
}

2. 我用react推薦的行內寫法，綁定一個click事件。

不過，在這邊，需要注意幾個小細節：

• onClick要用camelCase的寫法，他終究是jsx不是html
• 我們不能像html一樣，直接呼喚函數addMoney()，如果這樣寫，返回的值是一個undefined。這是因為，我們只是先把這個函式丟給onClick，但還沒有要呼叫。而如果直接呼叫了，addMoney()的return是undefined，等於我把undefined丟給了onClick。
  (這段我也是一知半解，難怪人家說，學React的最大的問題是，當初js就沒學好QAQ)

render() {
    return (
      <div>
        <p onClick={addMoney}>更多錢</p>
      </div>
    )
}

這時候，點下去，就成了！
但這其實只做了一半，因為我偷吃步的讓addMoney()是console.log字串，而不是更改react裡面的值，但實務上，我們需要的是透過事件去更改值，那麼，怎麼做就是明天的事情了！