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

【React事件和事件处理 – ReactJS实战教程】上一章ReactJS实战教程请查看：React表单form用法
事件是一个操作，它可以作为用户操作或系统生成的事件的结果而触发。例如，鼠标单击、加载web页面、按下一个键、窗口大小调整和其他交互称为事件。
React有自己的事件处理系统，与处理DOM元素上的事件非常相似。react事件处理系统称为合成事件，合成事件是浏览器原生事件的跨浏览器包装。

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

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

纯HTML的事件声明:

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

React中的事件声明：

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

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

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

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

在React中，我们可以写成：

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('你点击了一个链接.'); } return ( < a href="http://www.srcmini.com/#" 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;