⑤ 事件处理

1 React 元素的事件处理和 DOM 元素的不同

• React 事件的命名采用小驼峰式而不是纯小写

• 使用 JSX 语法时需要传入一个函数作为事件处理函数而不是一个字符串

<button onClick={ activeLasers }>
  Activate Lasters
</button>

• JSX 不能通过返回 false 阻止默认行为，必需显式使用 preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault()
    console.log('The link was clicked.')
  }
  return (
    <a href="#" onClick={ handleClick }>Click me</a>
  )
}

1.1 Toggle 组件 -- 渲染一个让用户切换开关状态的按钮

class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isToggleOn: true }
		
    // 为了在回调中使用this
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState(state => {
      isToggleOn: !state.isToggleOn
    })
  }
  render() {
    return (
      <button onClick={ this.handleClick }>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    )
  }
}
ReactDOM.render(
  <Toggle />
  document.getElementById('root')
)

• js中 class 的方法默认不会绑定 this

2 向事件处理函数传递参数

<button onClick={ e => this.deleteRow(id, e) }>Delete</button>
<button onClick={ this.deleteRow.bind(this, id) }>Delete</button>