5、ReactJs基础知识05--事件处理

react事件和原生HTML的区别：

      1、React 事件的命名采用小驼峰式（camelCase），而不是纯小写。（例如onClick=""）

      2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。(例如onClick={activateLasers})

      3、在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。

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

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

      4、class 的方法默认不会绑定 this，所以需要手动绑定class中的方法到this上，为了在回调中使用 `this`，这个绑定是必不可少的

　　这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

　　　　解决方法：

　　　　　　1）使用bind绑定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')
);

　　　　　　2）class fields语法

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    }
　　//class fields语法
    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')
);

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

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

    handleClick() {
        this.setState(state => ({
            isToggleOn: !state.isToggleOn
        }));
    }

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

ReactDOM.render(
　　<Toggle />,
    document.getElementById('root')
);

注意：语法3中回调函数作为props传入子组件时，这些组件可能会额外重新渲染，所以我们建议使用1、2语法来避免出现性能问题

　　5、向事件处理程序传递参数

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