React基础篇-事件处理

1.示例

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);    //绑定事件的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')
);

2.注意

1、标签上事件写法使用-驼峰写法；

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

<button onClick={this.activateLasers}> 按钮 </button>    //React写法

2、阻止默认行为，需使用 preventDefault，return false是无用的；

function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
}
———————————————————————————————————————————————————————————————————————————————————————————
1.e 是一个合成事件，不需要担心跨浏览器的兼容性问题；
2.如此事件无默认事件，一般我们也会使用 e.preventDefault() 把默认事件去掉；

3、事件函数需使用 bind 来让类中定义的事件函数绑定this，这样就可以onClick={heanleClick}了；

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    ...
  }
  render(){
    ...
  }
}

4、事件函数传递参数，需注意默认传递的 e 会放到形参的最后；

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
        this.preventPop=this.preventPop.bind(this);
    }
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    render(){
        return (
            <div>
                <p>hello</p>
                <a href="#" onClick={this.preventPop.bind(this,this.state.name)}>   //this传递过去
                    Click
                </a>
            </div>
        );
    }
}