04.React中事件处理

所有的demo源码:https://github.com/Ching-Lee/react-base

1.与html事件处理的不同

1.1.事件调用的不同

html使用字符串作为事件处理函数
<button onclick="activateLasers()">
  Activate Lasers
</button>
react使用表达式作为事件处理函数
<button onClick={activateLasers}>
  Activate Lasers
</button>

1.2 阻止默认行为

不能使用return false来组织默认行为

//html可以使用return false组织默认行为
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

//React需使用preventDefault方法
//这里的e是一个合成事件，根据W3C标准进行的合成，无需担心浏览器兼容问题
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

1.3 demo07事件的绑定

点击按钮ON变为OFF

off

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <script type="text/babel">
        class Toggle extends React.Component{
            constructor(props){
                super(props);
                //默认按钮是开的
                this.state={isToggleOn:true};
                //解决handleClick中this的绑定,方法1
                //this.handleClick=this.handleClick.bind(this);
            }

            //这里必须注意handleClick方法中this的绑定，如果不绑定this为undefined
            // 我们希望将this绑定到Toggle类创建的对象上，有两种解决方法
            handleClick(){
                //箭头函数，表示参数是preState，当参数只有一个时()可以省略。
                // 返回了一个对象，只有一个return语句时，{}和return可以省略，返回对象时要在对象外加()。
                this.setState(preState=>({isToggleOn:!preState.isToggleOn}));

            }
            render(){
                //解决 handleClick方法中this的绑定，可以使用箭头函数，箭头函数中的this作用域为定义时的作用域
                return(
                    <button onClick={e=>this.handleClick(e)}>
                        {this.state.isToggleOn?'ON':'OFF'}
                    </button>
                );
            }
        }
        ReactDOM.render(<Toggle/>,document.body);
    </script>
</body>
</html>

事件传递参数时this的处理

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

1.4 事件与数据的双向绑定

父组件通过props传递参数。
子组件通过onChange事件，去改变父组件的state对象。

2.React中的事件对象（event中的对象和方法）

通用事件

通用事件
键盘事件

键盘事件
焦点事件

图片.png
按键事件

按键事件
鼠标事件
触摸事件

最后编辑于：2018.02.05 14:29:00