聊聊React onClick 传递参数的问题

背景说明

在下图这样的列表中，点击删除按钮需要执行删除操作

列表产生：

	{
		title: '操作',
		dataIndex: 'rowguid',
		key: 'rowguid',
	    render: (text, record) => (
		      <Space size="middle">
		        <Button type="primary" size="small" >修改</Button>
		        <Button type="danger" size="small" >删除</Button>
		      </Space>
			)
	}

我需要在渲染生成删除按钮的时候加上事件，并且在点击的时候调用，并且还要传递参数，这个参数

开始我是这样写的：

但是这样的问题是，在页面加载的时候就执行了delByGuid 这个函数，我们控制台的输出：

不仅仅如此，当我点击删除按钮的时候，函数也没有执行，看来这样是不可以的

问题：

1. 页面渲染的时候执行

2.点击按钮，onclick 未执行

解决方案：

	{
		title: '操作',
		dataIndex: 'rowguid',
		key: 'rowguid',
	    render: (text, record) => (
		      <Space size="middle">
		        <Button type="primary" size="small" >修改</Button>
		        <Button type="danger" size="small" onClick={(e)=>delByGuid(text)}>删除</Button>
		      </Space>
			)
	}

onClick={(e)=>delByGuid(text)}

这样就解决了，页面加载的时候不行，而且在点击的时候能调用

到此这篇关于React onClick 传递参数的文章就介绍到这了,更多相关React onClick 传递参数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React传递参数的几种方式

    父子组件之间传递参数 父组件往子组件传值,直接用this.props就可以实现 在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传递过去的数据 // 父组件 render() { return ( // 使用自定义属性传递需要传递的方法或者参数 <ShopUi toson={this.state}></ShopUi> ) } //子组件 //通过this.props.toson就可以获取到父组件传递过来的数据 如果还需要往孙

  • 基于react组件之间的参数传递(详解)

    1.父组件向子组件传递参数 class Child extends Component { componentDidMount(){ let name = this.props.default; console,log(name); } render(){ const { default} = this.props; return ( <Input /> ) } } import React, { Component } from 'react'; import Child from './C

  • 聊聊React onClick 传递参数的问题

    聊聊React onClick 传递参数的问题

    背景说明 在下图这样的列表中,点击删除按钮需要执行删除操作 列表产生: { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( <Space size="middle"> <Button type="primary" size="small" >修改</Button> <Button type=

  • JS中append字符串包含onclick无效传递参数失败的解决方案

    append后面跟要添加的参数 <i class="fa fa-share pointer" aria-hidden="true" title="分享" onclick="share('${img.imgId}','${img.imgTitle}','${imgCover}','http://www.liuda.tv/selectedImg?imgId=${img.imgId}')"></i> 上面这段

  • 关于javaScript注册click事件传递参数的不成功问题

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实

  • Fragment跳转时传递参数及结果回传的方法(推荐)

    今天总结一下Fragment间的参数传递及结果返回的方法. 效果图: 1.点击"加载第二个Fragment按钮",加载出第二个Fragment,同时传递过去参数:"从Fragment1传来的参数"这几个String: 2.当用户点击第二个Fragment中的几个图片时,将点中的结果返回给第一个Fragment,将用户的选择在第一个Fragment显示出来 一.基本架构搭建 首先,我们要把整个架构搭起来,然后再进行参数传递和回传 (一).基本XML构建: 根据上面的效

  • Android 中Activity 之间传递参数

    Android 中Activity 之间传递参数 1.传递简单数据 在A Activity中 findViewById(R.id.startBActicityBtn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent i = new Intent(MainActivity.this,TheActivity.class); // 对基础的数据类型进行传递 i.

  • android使用intent传递参数实现乘法计算

    本文实例为大家分享了android使用intent传递参数实现乘法计算的具体代码,供大家参考,具体内容如下 主界面上是两个EditText和一个按钮.用于输入两个数字参数. calcute.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    

  • Vue路由传递参数与重定向的使用方法总结

    目录 前言 概念 1.vue路由传参 2.vue路由重定向 实际使用场景 路由传参 1.使用步骤 2.params传参 2-1.路由属性配置参数 3.query传参 4.url字符串拼接 5.接收路由参数的方法,分 ? 和 : 两种接收方式 6.路由传参的示例 路由重定向 1.路由重定向语法 2.实际示例 其他 拓展 最后 前言 前端开发过程中,作为前端开发者来说关于vue的使用并不陌生,vue相关常用的知识点也是非常重要的,不管是在实际开发中还是在求职面试中都很重要.在vue使用中,路由相关的

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • 详解在Angularjs中ui-sref和$state.go如何传递参数

    详解在Angularjs中ui-sref和$state.go如何传递参数

    1 ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: <a ui-sref="message-list">消息中心</a> $state.go('someState')一般使用在 controller里面: .controller('firstCtrl', function($scope, $state) { $state.go('login'); }); 这两个本质上是一样的东西,我们看ui

随机推荐