zoukankan      html  css  js  c++  java
  • React事件处理

    function ActionLink() {
      function handleClick(e) {
        e.preventDefault();
        console.log('链接被点击');
      }
     
      return (
        <a href="#" onClick={handleClick}>
          点我
        </a>
      );
    }
    class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
     
        // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
        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('example')
    );
    class Popper extends React.Component{
        constructor(){
            super();
            this.state = {name:'Hello world!'};
        }
        
        preventPop(name, e){    //事件对象e要放在最后
            e.preventDefault();
            alert(name);
        }
        
        render(){
            return (
                <div>
                    <p>hello</p>
                    {/* 通过 bind() 方法传递参数。 */}
                    <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
                </div>
            );
        }
    }
  • 相关阅读:
    LightOJ 1030 Discovering Gold(期望)
    CodeForces 567B Berland National Library
    HDU
    HDU
    (模拟、进制转换)
    HDU
    HDU
    CodeForces 429 B B. Working out
    CodeForces 546 D. Soldier and Number Game(素数有关)
    2016中国大学生程序设计竞赛
  • 原文地址:https://www.cnblogs.com/shui1993/p/9959971.html
Copyright © 2011-2022 走看看