反应动态事件
介绍
事件为应用程序提供了动态界面，从而提高了应用程序之间的用户交互性。React 应用程序中的事件与原生 JavaScript 中用于操作 HTML DOM 的事件非常相似，它们通过将各种事件附加到元素来操作 HTML DOM，因此给定元素的每个事件都应附加一个事件处理程序。
在本指南中，我们将了解什么是事件处理程序以及如何在 React 应用程序中使用动态事件处理。
在 React 中附加事件
如您所知，React 是一个基于 JavaScript 的库，这意味着它支持附加到任何 HTML 元素的所有事件。因此，访问或附加事件与使用原生 JavaScript 略有不同。
在 React 中，应该将事件附加到事件处理程序以处理所需的值。可以使用事件键附加事件，如下所述。
import React, { Component } from "react";
import { render } from "react-dom";
import Demo from "./Demo";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
testMethod() {
console.log("Hello World");
}
render() {
return (
<div>
<Demo eventKey={this.testMethod} />
</div>
);
}
}
render(<App />, document.getElementById("root"));
在上面的例子中，testMethod()是一个事件处理程序，eventKey用于将事件作为 props 发送给子组件。它可以像这样在子组件中访问。
componentDidMount() {
this.props.eventKey()
}
从子组件来看，可以通过this.props访问事件，因此这是从父组件访问事件的方法之一。
使用单选按钮组控制处理动态事件
到目前为止，您已经了解了如何将事件处理程序附加到子组件以及如何从子组件访问它，但有时您可能需要为元素组维护公共事件。
在本节中，您将学习如何维护公共事件处理程序以及单选按钮组。
创建一个名为DynamicRadioList.jsx的组件并运行以下代码行。
import React, { Component } from "react";
class DynamicRadioList extends Component {
constructor() {
super();
this.state = {
name: "React",
selectedGender: "Male"
};
this.onGenderChange = this.onGenderChange.bind(this);
}
onGenderChange(event) {
this.setState({
selectedGender: event.target.value
});
}
render() {
const { items } = this.state;
return (
<div>
<label>
<input
type="radio"
value="Male"
checked={this.state.selectedGender === "Male"}
onChange={this.onGenderChange}
/>
Male
</label>
<label>
<input
type="radio"
value="Female"
checked={this.state.selectedGender === "Female"}
onChange={this.onGenderChange}
/>
Female
</label>
<label>
<input
type="radio"
value="Other"
checked={this.state.selectedGender === "Other"}
onChange={this.onGenderChange}
/>
Other
</label>
</div>
);
}
}
export default DynamicRadioList;
在此示例中，您有三个不同的单选按钮，分别称为“男性”、“女性”和“其他”。
除了单选按钮之外，您还有两个重要的属性：
- Checked，用于确定单选按钮是否被选中
- onChange，寻找选择方面的变化
一旦用户改变他们的选择，就可以通过名为onGenderChange()的方法将更新的值更新到状态中。
这就是如何利用动态事件和 HTML 元素根据用户交互获取适当的值。
使用动态数组列表处理动态事件
在 Web 应用程序中可以发现动态记录列表，用户可以选择其中任何一个来查看详细信息。
在这种情况下，您需要从项目列表中获取有关用户所选记录的所有详细信息，您可以通过维护公共动态事件来实现，这对于获取所选记录的详细信息很有用。
创建一个名为DynamicList.jsx的新组件并运行以下代码行。
import React, { Component } from "react";
class DynamicList extends Component {
constructor() {
super();
this.state = {
name: "React",
items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
};
this.onItemClick = this.onItemClick.bind(this);
}
onItemClick(event) {
console.log(event.target.innerHTML)
}
render() {
const { items } = this.state;
return (
<div>
<ul>
{items.map((item, index) => {
return <li onClick={this.onItemClick} key={index}>{item}</li>;
})}
</ul>
</div>
);
}
}
export default DynamicList;
在上面的例子中，有一个名为items的状态变量，它包含要渲染的数组项列表。
项目列表被映射到render()方法，但要注意一个属性onClick()。
return (
<div>
<ul>
{items.map((item, index) => {
return <li onClick={this.onItemClick} key={index}>{item}</li>;
})}
</ul>
</div>
);
一旦用户点击列表中的任何项目，事件处理程序onItemClick()将获取 HTML 的内部 HTML 以进行进一步处理。
列表中可以有多个项目，但onItemClick()方法对所有项目都是通用的。您可以说它是一个处理所有项目的点击事件的动态事件。
这是获取选定值的最广泛使用的方法之一，它可以为多个元素维护单一功能。
结论
在本指南中，我们了解了什么是事件处理程序以及如何在 React 应用程序中使用它，包括使用单选按钮组和数组列表的两个示例。
您可以根据特定的功能需求创建动态事件并将其分配给元素或子组件。希望本指南对您有所帮助。继续阅读。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~