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>