React 事件处理

React 元素的事件处理和 DOM 元素类似但是有一点语法上的不同:

React笔记

React 元素的事件处理和 DOM 元素类似但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法, 而不是小写
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数, 而不是一个字符串(DOM 元素的写法)

HTML写法

<button onclick="activateLasers()">
  激活按钮
</button>

React写法

<button onClick={activateLasers}>
  激活按钮
</button>

组件渲染一个让用户切换开关状态的按钮eact写法

<body>
<div id="example"></div>
<script type="text/babel">
class MyNameIsStitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isMyNameIsStitch: true};

    {/*  这边绑定是必要的, 这样 `this` 才能在回调函数中使用  */} 
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isMyNameIsStitch: !prevState.isMyNameIsStitch
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isMyNameIsStitch ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

向事件处理程序传递参数

<body>
<div id="example"></div>
<script type="text/babel">
class MyNameIsStitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isMyNameIsStitch: true};

    {/*  这边绑定是必要的, 这样 `this` 才能在回调函数中使用  */} 
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isMyNameIsStitch: !prevState.isMyNameIsStitch
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isMyNameIsStitch ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>

没有使用属性初始化器语法, 你可以在回调函数中使用箭头函数

class MyNameIsStitch extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    {/*  这个语法确保了 `this` 绑定在  handleClick 中  */}  
    return (
      <button onClick={(e) => this.handleClick(e)}>
        我叫史迪奇
      </button>
    );
  }
}

向事件处理程序传递参数

{/*  参数 e 作为 React 事件对象将会被作为第二个参数进行传递
通过箭头函数的方式, 事件对象必须显式的进行传递, 但bind 的方式, 事件对象以及更多的参数会被隐式的进行传递
bind 方式向监听函数传参 在类组件中定义的监听函数 事件对象 e 要排在所传递参数的后面  */}  
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-event-processing.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议