React 事件
事件是可能由于用户操作或系统生成的事件而触发的操作。例如，单击鼠标，加载网页，按下键，调整窗口大小以及进行其他交互都称为事件。
React拥有自己的事件处理系统，该系统与在DOM上处理事件非常相似。元素。React事件处理系统称为合成事件。合成事件是浏览器本地事件的跨浏览器包装。
使用react与处理DOM上的事件有一些语法上的区别。这些是:
React事件的名称为 camelCase ，而不是小写。
使用JSX，将函数作为事件处理程序而不是字符串传递。例如:
纯HTML中的事件声明:
<button onclick="showMessage()">
Hello lidihuo
</button>
React中的事件声明:
<button onClick={showMessage}>
Hello lidihuo
</button>
3、作为回应，我们无法返回 false 来防止默认行为。我们必须显式调用 preventDefault 事件，以防止出现默认行为。例如:
在纯HTML中，为了防止打开新页面的默认链接行为，我们可以编写:
<a href="#" onclick="console.log('You had clicked a Link.'); return false">
Click_Me
</a>
在React中，我们可以将其写为:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You had clicked a Link.');
}
return (
<a href="#" onClick={handleClick}>
Click_Me
</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>Simple Event Example</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;
输出
执行上面的代码，您将获得以下输出。
在文本框中输入名称后，您将得到如下屏幕所示的输出。
