React笔记——核心概念：6.事件处理

1、React元素事件处理和DOM元素语法差异

1.React 事件的命名采用小驼峰式（camelCase），而不是纯小写
2.使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

JavaScript

// 传统HTML <button onclick="activateLasers()"> Activate Lasers </button> // React <button onClick={activateLasers}> Activate Lasers </button>

1
2
3
4
5
6
7
8
9

// 传统HTML
<button onclick="activateLasers()">
Activate Lasers
</button>

// React
<button onClick={activateLasers}>
Activate Lasers
</button>

3.阻止默认行为方法不同

必须显式的使用 preventDefault

// 传统方式
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

// React
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.')
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  )
}

// 传统方式

Click me

</a>

// React

function ActionLink() {

function handleClick(e) {

e.preventDefault();

console.log('The link was clicked.')

}

return (

Click me

</a>

)

}

4.监听器添加方式不同

使用 React 时，一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器,只需要在该元素初始渲染的时候添加监听器即可

1.绑定this

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')
)

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 (

{ this.state.isToggleOn ? 'ON' : 'OFF' }

</button>

)

}

ReactDOM.render(

<Toggle />,

document.getElementById('root')

)

2.public class fields 语法

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    )
  }
}

class LoggingButton extends React.Component {

// 此语法确保 `handleClick` 内的 `this` 已被绑定。

// 注意: 这是 *实验性* 语法。

handleClick = () => {

console.log('this is:', this);

}

render() {

return (

Click me

</button>

)

}

3.在回调中使用箭头函数

该语法每次渲染时都会创建不同的回调函数，性能不如在构造器中绑定或使用class fields语法

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this)
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    )
  }
}

class LoggingButton extends React.Component {

handleClick() {

console.log('this is:', this)

}

render() {

// 此语法确保 `handleClick` 内的 `this` 已被绑定。

return (

<button onClick={() => this.handleClick()}>

Click me

</button>

)

}

2、向时间处理程序传递参数

箭头函数

JavaScript

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

1

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

JavaScript

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

1

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