react学习笔记5--处理事件

react元素处理事件和DOM元素非常相似，但是有语法上的差别

react事件以驼峰式命名，而不是小写

//html
<button onclick="activateLasers()">
    activate Lasers
</button>

//react
<button onClick={activateLasers}>
    activate Lasers
</button>

另一个不同是不能返回false来组织默认行为，必须显式的使用preventDefault

//html
<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>
    );
}

react不需要使用addEventListener为DOM元素添加监听，只需要当元素被初始render的时候提供一个监听

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn:true};
        //the binding is necessary to make this work in the callback
        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')
);

给处理事件传递参数

<button onClick={(e) => this.deleteRow(id,e)}>delete row</button>

<button onClick={this.deleteRow.bind(this,id)}>delete row</button>

在这两种情况中，代表react事件的e元素都会被作为第二个参数传递。箭头函数必须要显式传入，第二种会自动传入。