今天要來談談如何透過事件來修改值，也就是如何修改state。
但在這些事情之前，我們需要先釐清一些跟React無關，而是js本身的概念。

在js裡面，如果寫一個function，function裡的this會指向window

function demo(){
  console.log(this)
}
demo()

那如果開啟了嚴格模式，this就會是undefined。

function demo(){
  'use strict'
  console.log(this)
}
demo()

也就是說，當我們想要使用this的時候，務必要知道這個this到底是誰。

事件綁定

那麼，我就拿幾天前寫state與Props的案例來用，一樣，我們還是先一眼掠過長長的程式碼。

function Hello(props) {
  return(
    <div>
      <h1>嗨,{props.name}</h1>
      <p>(值從props來，固定不動，輸入的)</p>
    </div>    
  ) 
}
function Accept(props) {
    return(
    <div>
      <h1>你現在有,{props.number}元</h1>
      <p>(接收的值是一樣從props傳來來,但這個props的值本身是一個state)</p>
    </div>    
  )
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
        add:100
    }
    this.addMoney = this.addMoney.bind(this);
  }
  addMoney() {
    this.setState({
      add: this.state.add + 100
    })
  }
  render() {
    return (
      <div>
        <Hello name='andy'/>
        <Accept number={this.state.add}/> 
        <p onClick={this.addMoney}>更多錢</p>
      </div>
    )
  }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App/>,
);

我寫了一個叫做addMoney()的function，在這裡，我想要修改State裡面add的值，所以用了this.setState的方法，以及抓取this.state.add的值，那麼問題來了，這個function裡面的this，是誰！？

如果完全沒做其他操作的話，這個this會是undefined(因為babel預設開啟了嚴格模式，而返回undefined這件事情，是js的概念，不是react。

文件也是這樣說的：

如果你忘了綁定 this.handleClick 並把它傳遞給 onClick 的話，this 的值將會在該 function 被呼叫時變成 undefined。這並非是 React 才有的行為，而是 function 在 JavaScript 中的運作模式。

  addMoney() {
    this.setState({
      add: this.state.add + 100
    })
  }

如果我想要把this真的指向我們想要的東西(就是組件實體)的話，就必須要綁定this，也就是在constructor裡面，把this.addMoney綁定this，因為constructor的this，就是指向我們要的組件。

  constructor() {
    super();
    this.state = {
        add:100
    }
    this.addMoney = this.addMoney.bind(this);
  }

於是，我們就輕鬆的了解怎麼好好地在react裡面撰寫事件啦！