React事件和事件处理 – ReactJS实战教程

上一章ReactJS实战教程请查看：React表单form用法

事件是一个操作，它可以作为用户操作或系统生成的事件的结果而触发。例如，鼠标单击、加载web页面、按下一个键、窗口大小调整和其他交互称为事件。

React有自己的事件处理系统，与处理DOM元素上的事件非常相似。react事件处理系统称为合成事件，合成事件是浏览器原生事件的跨浏览器包装。

使用react处理事件与在DOM上处理事件有一些语法上的差异。这些都是：

1. React事件命名使用驼峰命名，而不是小写。
2. 使用JSX，函数将作为事件处理程序而不是字符串传递。例如:

纯HTML的事件声明:

<button onclick="showMessage()">  
       Hello srcmini
</button>  

React中的事件声明：

<button onClick={showMessage}>  
      Hello srcmini
</button>  

• 3. 在react中，我们不能返回false来防止默认行为，我们必须显式地调用preventDefault事件来防止默认行为。例如:

在纯HTML，为了防止默认的链接行为打开一个新的页面，我们可以写:

<a href="#" onclick="console.log('你点击了一个链接.'); return false">  
   点击
</a>  

在React中，我们可以写成：

function ActionLink() {  
    function handleClick(e) {  
        e.preventDefault();  
        console.log('你点击了一个链接.');  
    }  
    return (  
        <a href="#" onClick={handleClick}>  
             点击  
        </a>  
    );  
}  

在上面的例子中，e是一个根据W3C规范定义的合成事件。

现在让我们看看如何在React中使用事件。

例子

在下面的示例中，我们只使用了一个组件并添加了一个onChange事件。此事件将触发changeText函数，该函数返回公司名称。

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            companyName: ''  
        };  
    }  
    changeText(event) {  
        this.setState({  
            companyName: event.target.value  
        });  
    }  
    render() {  
        return (  
            <div>  
                <h2>简单事件例子</h2>  
                <label htmlFor="name">Enter company name: </label>  
                <input type="text" id="companyName" onChange={this.changeText.bind(this)}/>  
                <h4>You entered: { this.state.companyName }</h4>  
            </div>  
        );  
    }  
}  
export default App;