zoukankan      html  css  js  c++  java
  • React (3) -- Handling Events

    原文地址:https://facebook.github.io/react/docs/handling-events.html

    使用React元素处理事件与处理DOM元素上的事件非常相似。 有一些句法差异:

    1. 反应事件使用camelCase命名,而不是小写。
    2. 使用JSX,您可以传递一个函数作为事件处理程序,而不是一个字符串。
    3. 不能用return false来阻止React中的默认行为,而是必须显式调用preventDefault。
    function ActionLink() {
      function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
      }
    
      return (
        <a href="#" onClick={handleClick}>
          Click me
        </a>
      );
    }
    
    

    在这里,e是一个合成事件。React根据W3C规范定义了这些合成事件,因此您不必担心跨浏览器的兼容性。

    当使用React时,您通常不需要调用addEventListener来在创建DOM元素之后添加监听器。而是在元素最初呈现时提供一个监听器。

    当您使用ES6类定义组件时,常见的模式是将事件处理程序作为类上的方法。

    class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );
    

    button绑handleClick方法时,是用onClick而不是onclick。

  • 相关阅读:
    关于 Bellman-Ford 与 Floyd 算法的一点感想
    中途相遇法 解决 超大背包问题 pack
    具体一些的博弈论 sqrstone
    SG函数学习总结
    mc
    string
    积木大赛
    pta l3-20(至多删三个字符)
    pta l3-7(天梯地图)
    ucore-lab1-练习2report
  • 原文地址:https://www.cnblogs.com/xmyun/p/6963096.html
Copyright © 2011-2022 走看看