如何传递到react列表项以用作onClick中的参数
在React中，要将参数传递给列表项的onClick事件，可以通过以下几种方式实现：
- 使用箭头函数： 可以在onClick事件中使用箭头函数来传递参数。例如，假设你有一个包含多个列表项的数组，你可以通过map函数遍历数组，并为每个列表项添加一个onClick事件。在箭头函数中，你可以将参数传递给事件处理函数。
const items = ['item1', 'item2', 'item3'];
const handleClick = (param) => {
console.log(param);
};
const itemList = items.map((item) => (
<li key={item} onClick={() => handleClick(item)}>
{item}
</li>
));
return <ul>{itemList}</ul>;- 使用bind方法： 另一种传递参数的方式是使用bind方法。在onClick事件中，你可以使用bind方法将参数绑定到事件处理函数中。
const items = ['item1', 'item2', 'item3'];
const handleClick = (param) => {
console.log(param);
};
const itemList = items.map((item) => (
<li key={item} onClick={handleClick.bind(null, item)}>
{item}
</li>
));
return <ul>{itemList}</ul>;无论是使用箭头函数还是bind方法，都可以将参数传递给onClick事件处理函数。这样，当点击列表项时，事件处理函数将接收到相应的参数，并进行处理。
请注意，以上示例中的代码仅展示了如何在React中传递参数给列表项的onClick事件。对于其他方面的开发，如前端开发、后端开发、软件测试等，请提供具体的问题，以便我能够给出更详细和全面的答案。
相关·内容
我想知道如何将参数传递给onClick函数react list元素 这是我的清单。const items = this.state.tableData.items.map( };
} 这是我的<
浏览 22提问于2019-06-10得票数 3
回答已采纳
2回答
我用React制作了一个简单的todo应用程序。<button onClick={this.onHandleClick.bind(this)}>Add</button>
在该方法中，我需要防止默认行为，以防止单击按钮时页面
浏览 2提问于2016-11-19得票数 1
回答已采纳
2回答
动态反应风格
、、、
在react中，在我的主页中，我有四列。我需要独立地改变它们的尺寸。当我在四列中的一列上循环时，我可以改变他的大小，但我不知道如何同时改变其他列的大小。目的是将单击的列呈现为大尺寸的列，而其他三列的大小较小。但我不知道。我的</em
浏览 0提问于2018-01-30得票数 0
回答已采纳
我需要子组件中父categoryHandler函数中的类别详细信息。我不知道在子组件中放置这个props.categoryHandler函数的位置，所以当单击它时，我应该将详细信息提供给父categoryHandler函数。prev); <React.Fragment>
<ListItem button onClick={handleClick} item={child} /&g
浏览 10提问于2022-09-28得票数 -1
回答已采纳
我对ReactJS、JavaScript和整个编码工作都是非常陌生的。
我已经创建了一个从父组件传递给子组件数组列表，现在我想创建一个onClick事件，每当用户单击任何列表项时，该事件就会发生。该值(用作键id)被发送回父对象，因此父对象可以将该键值发送到另一个子对象，该子对象将根据要呈现的组件的关键字使用条件呈现。我最好不要使用像flux这样的其他库。我被卡住了，因为我不能把这个值从孩子传递回父对象。我认为语法有些混乱，或者我<e
浏览 14提问于2017-01-25得票数 6
回答已采纳
1回答
是否有可能用子代法在道具中传递成分？我要做的是： <button onClick={TContainer.METHOD}>TuCLIK</button>我想在孩子中调用方法，但在父元素中创建元素。我想把这个组件传递<
浏览 2提问于2017-09-25得票数 4
回答已采纳
我可以从火基中添加和获取数据，但是我不能获得，如何传递键值来删除函数。我需要从数据库中删除项目并呈现其余的项目。var data = [] constructor(props) { </View> }我用firebase.database().ref(
浏览 1提问于2019-10-08得票数 0
回答已采纳
我的工作解决方案如下所示。但它不能很好地扩展，而且看起来很冗长。这段代码简单地切换了一个底部边框，这样你就知道你选择了什么。}
// ... snip
<li style={style_fave} id="mm_top_list_item" onClicksv_star_5_custom.svg"/>
浏览 3提问于2017-10-10得票数 0
我在一个onClick中设置了一个ListItem事件。然后在调用以传递单击列表项的id和名称值的方法上调用.bind。下面的建议使用bind，但似乎将onCLick事件添加到ListItem中会破坏列表绑定。
在添加单击事件之前，绑定到asset.name的列表跨度按预期工作，并填充列表。另外，如果我尝试使用没有参数的onClick={this._onAssetSelected(
浏览 5提问于2016-09-27得票数 0
回答已采纳
我有一个react管理项目，并为列表视图实现了一个自定义按钮，该按钮被传递到bulkActionButtons属性中，文档如下：
const BulkUserActions = props => (缺少的部分是如何在操作完成后取消选择列表项。props.selectedIds是受保护的，因此在完成逻辑后，我无法简单地将其设置为空数组。问题是如何取消设置props.selectedIds或其他在完成时取消选择列表项</em
浏览 0提问于2019-01-07得票数 2
3回答
我是个新手，我做了一个可以保存搜索的应用程序。这将拉取JSON，但当前正在从静态数组data中拉取。我无法从搜索列表中删除搜索。这是jsbin：var DeleteSearch = React.createClass({ return (<button onClick="this.props.deleteSearchItem" value={index}><i
浏览 0提问于2016-03-10得票数 6
回答已采纳
我正在尝试遵循React的规则，使用他们对ES6类推荐的模式： constructor() { } return (
<div onClick={this.但是，当我需要将参数传递给_onClick<
浏览 2提问于2017-02-15得票数 9
1回答
将参数传递给onClick函数
、、、、
我用来自NASA当日图片的API创建了一个React单页应用程序，并在抽屉中添加了一个列表，其中显示了图像的历史记录，它只显示其日期。我有一个Material-UI列表项，我想向它的onClick函数传递一个参数。我希望当我点击抽屉上的特定日期时，可以显示该特定日期的图像。这里我想传递参数index： menu.
浏览 0提问于2017-11-25得票数 0
所以，我已经做了这样的事情是不好的，因为它正在为每个呈现周期创建一个新的函数实例。但我如何通过args反应-本地人？
浏览 0提问于2018-07-27得票数 2
回答已采纳
2回答
我试图为两个可能的组件道具创建一个区分的联合类型，但对于我在本例中传递给onClick函数的论点，它似乎不起作用： label: string, onClick?{}
当将"e“参数向下传递到newB
浏览 4提问于2022-05-26得票数 0
2回答
我正在使用React，我看到一个常见的做法是绑定构造函数中的函数，我也想使用它。不过，我不太清楚绑定对于接受参数的函数是如何工作的。return ( <ListItem onClick={ () => this.onListClicked(m
浏览 6提问于2017-09-17得票数 1
回答已采纳
React docs 声明：<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
在这两种情况下，代表React事件的e参数将作为ID之后的第二个参数传递
浏览 0提问于2019-04-12得票数 2
回答已采纳
是否可以将"table“类型的参数和"int IDENTITY(1,1)”类型的列传递给过程，并使用作为输入参数传递的DataTable对象来执行此存储过程？我收到以下错误："INSERT INSERT到标识列中，表变量不允许。表值参数\"@xxxxx\“的数据不符合该参数的表类型。”我能
浏览 2提问于2010-07-09得票数 4
这个问题很简单，而且不是专门与导航条相连的，这只是一个很好的例子。对此最简单的解决办法是什么？如何在没有单击多个NavItems的情况下将NavBar内的多个重置为默认的非活动状态？NavBar.js
import React f
浏览 0提问于2018-06-29得票数 1
我正在制作一个计算器，在react中，我为数字制作了按钮，当按下按钮"7“时，在输入字段中添加了7。我正在使用useState来完成这个任务。我制作了一个箭头函数funinpval，它在参数中以数字作为字符串，然后通过传递相应的数字作为参数，使用这个函数使用不同的按钮onclick处理程序。但我错了
import React fr
浏览 6提问于2021-08-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
