React对事件的处理

2017-06-10  本文已影响0人  yanghanbin_it

与原生的事件处理有点差异,具体表现在:

  1. react使用驼峰事件命名,而不是小写
  2. 对于句柄来说传递的是一个jsx函数
//原生的写法
<button onclick="activateLasers()">
  Activate Lasers
</button>
//react写法
<button onClick={activateLasers}>
  Activate Lasers
</button>
  1. 阻止浏览器默认行为,原生事件处理,可以通过返回false来阻止阻止浏览器默认行为,也可以通过调用事件对象的preventDefault方法来实现。而react只能通过调用preventDefault来实现。
//原生的处理方式
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
//在react中
function ActionLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
    }

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

实例: 在页面实现按钮开关
在Toggle组件中,返回了button,根据状态显示on/off文案,并且监听点击事件,回调函数为handleClick,在回调中设置组件的状态,state改变后,则又调用render方法,更新UI。

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

此处bind函数很有意思:先来看,bind的函数作用:改变函数执行的上下文,也就是this的指向。
bind函数会创建一个新的函数,称为绑定函数,并且调用的时候上下文指向创建时传入的第一个参数。
在本例中,点击出发onClick事件后,执行this.handleClick,此时的this指向是当前Toggle对象。

如果不使用bind函数,还可以使用属性初始化语法,也可以直接在钩子函数处使用箭头函数

handleClick = () => {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }
render() {
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
      </button>
        );
    }
上一篇 下一篇

猜你喜欢

热点阅读