react06_事件处理

react 事件处理

一、react事件

1.事件的定义

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

function activateLasers(){
    ...
}

<button onClick={activateLasers}>
  Activate Lasers
</button>

2.阻止默认行为

在react中不能通过返回false的方式来阻止控件的默认行为，必须显式使用preventDefault来阻止（空超链接、表单提交等）

function ALink(){
    function handleClick(e){
        e.preventDefault();
        console.log("Click link.");
    }
    
    return(
    	<a href="#" onClick={handleClick}>Click Me!</a>
    );
}

3.添加事件处理函数

普通事件处理函数

函数没有涉及组件的props和state

class Toggle extends React.Component {
    constructor(props) {
        super(props);
    }

    handleClick(){
        alert("click");
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                click me!
             </button>
        );
    }
}

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

回调函数：函数用作事件的回调函数

第一种方式：

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isOn: true};
        //将函数绑定到组件后，用作回调
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        //每次点击将state中isOn的值反转
        this.setState( state => ({
            isOn: !this.state.isOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isOn ? 'On' : 'Off'}
             </button>
        );
    }
}

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

function.bind(this)有点麻烦，不过有第二种方式：

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

    handleClick = () => {
        //每次点击将state中isOn的值反转
        this.setState(state => ({
            isOn: !this.state.isOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isOn ? 'On' : 'Off'}
             </button>
        );
    }
}

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

还有第三种方式，直接在回调中使用箭头函数：

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

    handleClick(){
        //每次点击将state中isOn的值反转
        this.setState( state => ({
            isOn: !this.state.isOn
        }));
    }

    render() {
        return (
            //直接在回调中使用handleClick函数，e作为事件参数
            <button onClick={(e) => this.handleClick(e)}>
                {this.state.isOn ? 'On' : 'Off'}
             </button>
        );
    }
}

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

4.向事件处理程序传递参数

//两种方式：
//1.箭头函数，事件对象显式传递
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

//2.绑定方式 function.bind()，事件对象隐式传递
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

简单的传参：将zhang3传到printText(name)函数

class Printer extends React.Component{
    constructor(props) {
        super(props);
    }
    
    //当按钮被点击时，调用该函数，控制台将打印出‘zhang3.....’和input输入框中的内容
    printText(name) {
        console.log(name + document.getElementById("un").value);
    }

    render() {
        return (
			<div>
            	<input id="un" type="text"/><br/>
                <button onClick={(e) => this.printText('zhang3', e)}></button>
            </div>
        );
    }
}

ReactDOM.render(
    <Printer />, 
    document.getElementById('react_test')
);