在React教程的今天翻译的一部分中，我们将继续使用Todo应用程序，并讨论如何在React中处理事件。
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目课29.讲习班。 TODO应用程序。 阶段数4
→
原创▍工作
上次，我们从JSON文件下载了应用程序的待办事项列表，然后遍历结果数组，使用
map()方法形成了
map()件。 我们想修改这些数据。 而且，只有将它们预加载到组件的状态中，我们才能执行此操作。
今天的任务是将
App组件转换为状态组件，并将导入的案例数据加载到该组件的状态中。
▍解决方案
回忆一下我们项目中已经存在的
App组件代码：
import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() { const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>) return ( <div className="todo-list"> {todoItems} </div> ) } export default App
为了能够修改待办事项列表中的数据，我们需要将
todosData现在存储的
todosData放入
App组件的状态。
为了解决这个问题，我们必须首先将
App的功能组件转换为基于类的组件。 然后，我们需要将数据从
todosData到状态中，并形成
TodoItem组件列表，
TodoItem绕过
todosData数组，而是绕过在状态中存储了相同数据的数组。 外观如下：
import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component { constructor() { super() this.state = { todos: todosData } } render() { const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>) return ( <div className="todo-list"> {todoItems} </div> ) } } export default App
应该注意的是，在完成所有这些转换之后，应用程序的外观并没有改变，但是在完成它们之后，我们为进一步的工作做好了准备。
课30.在React中处理事件
→
原创事件处理是驱动Web应用程序的因素，它使它们与简单的静态网站区分开来。 React中的事件处理非常简单，它与常规HTML中的事件处理方式非常相似。 因此，例如，在React中，存在
onClick和
onSubmit事件处理程序，它们与以
onclick和
onsubmit形式呈现的类似HTML机制类似，不仅在名称方面（但是在React中，它们的名称是使用骆驼样式形成的），他们如何与他们合作。
在这里，我们将考虑一些示例，尝试使用
create-react-app的标准应用
create-react-app ，该
App create-react-app的
App组件文件包含以下代码：
import React from "react" function App() { return ( <div> <img src="https://www.fillmurray.com/200/100"/> <br /> <br /> <button>Click me</button> </div> ) } export default App
这就是我们的应用程序在浏览器中的外观。
浏览器中的应用程序页面在我们认真讨论使用
setState()方法修改组件状态之前，我们需要在React中处理事件和事件处理。 事件处理机制允许应用程序的用户与他进行交互。 应用程序可以响应例如
click或
hover事件，在这些事件发生时执行某些操作。
实际上，React中的事件处理非常简单。 如果您熟悉用于将事件处理程序分配给控件的标准HTML机制（例如
onclick事件处理程序），那么您将立即看到与React提供给我们的那些机制的相似之处。
例如，为了通过HTML使得可以通过单击某个按钮来执行功能，可以使用以下构造（前提是该功能存在并且可以访问）：
<button onclick="myFunction()">Click me</button>
如前所述，在React中，事件处理程序具有根据骆驼样式规则组成的名称，即
onclick将在此处变成
onclick 。 对于
onMouseOver事件
onMouseOver和其他处理程序也是如此。 进行此更改的原因是因为它使用了JavaScript常用的实体命名方法。
现在，让我们使用我们的代码，并使按钮响应对它的单击。 与其将代码传递给处理程序以将其作为字符串调用该函数，我们不用花括号将函数的名称传递。 现在，我们的代码的相应片段的采购将如下所示：
<button onClick={}>Click me</button>
如果您查看本示例中使用的
App组件的代码，您会发现单击按钮时尚未声明计划调用的函数。 通常，现在我们可以通过直接在描述按钮的代码中声明的匿名函数来解决问题。 外观如下：
<button onClick={() => console.log("I was clicked!")}>Click me</button>
现在，当您单击按钮时，
I was clicked!的文本
I was clicked! 。
通过声明独立的功能并将组件文件代码转换为以下形式，可以达到相同的效果：
import React from "react" function handleClick() { console.log("I was clicked") } function App() { return ( <div> <img src="https://www.fillmurray.com/200/100"/> <br /> <br /> <button onClick={handleClick}>Click me</button> </div> ) } export default App
有关React支持的事件的完整列表，请查看
此文档页面。
现在尝试为我们的应用程序配备新功能。 即，确保将鼠标悬停在控制台中的图像上时，显示一条消息。 为此，您需要在文档中找到合适的事件并组织其处理。
实际上，可以通过不同方式解决此问题，我们将基于
onMouseOver事件演示其解决方案。 发生此事件时，我们将在控制台中显示一条消息。 这是我们的代码现在的样子：
import React from "react" function handleClick() { console.log("I was clicked") } function App() { return ( <div> <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/> <br /> <br /> <button onClick={handleClick}>Click me</button> </div> ) } export default App
事件处理为程序员提供了巨大的机会，当然，这不仅限于向控制台输出消息。 将来，我们将讨论事件处理以及更改组件状态的能力如何使我们的应用程序解决分配给它们的任务。
与往常一样，我们建议您花一些时间尝试一下您今天所学到的知识。
总结
今天，您做了一些动手工作，为Todo应用程序的重大更改奠定了基础，并熟悉了React中的事件处理机制。 下次将为您提供另一个研讨会，并将提出一个新主题。
亲爱的读者们！ 如果您已熟悉React中的事件处理方法，并尝试了所学的知识，请告诉我们。
