React点击事件的两种写法小结

目录
  • React点击事件写法
    • 1.bind绑定（推荐）
    • 2.箭头函数
  • React点击事件不好用，可能是被其他组件遮挡

React点击事件写法

1.bind绑定（推荐）

第一个参数指向this，第二个参数开始才是事件函数接收到的参数，事件对象event默认是最后一个参数。

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}

render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>
        </React.Fragment>
    )
}
...

这里的话绑定this可以统一写，这样代码看起来整洁点。

...
constructor(props){
    super(props);
    this.state = {};
    this.checkMenu = this.checkMenu.bind(this);
}

clicked = (param)=>{
    return (event)=>{
        console.log(event.target.value); // 按钮
        console.log(param); // hello
    }
}

render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked('hello')}>点击</button>
        </React.Fragment>
    )
}
...

2.箭头函数

箭头函数若要传事件对象event的话，需要在箭头函数中把event作为参数传递给触发的事件。

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}

render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={(event)=>this.clicked("hello world",event)}>点击</button>
        </React.Fragment>
    )
}
...

React点击事件不好用，可能是被其他组件遮挡

入门React不久，练习例子的时候发现点击退出事件不好用。

而逻辑啥的没有问题，在点击事件里写console打印也没反应（就是根本不识别）。

搜索一下，发现可能是按钮所在的组件被底部导航遮挡住了。

给导航的less样式添加“z-index:-1”便可以使用了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ES6下React组件的写法示例代码

    本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍: 一:定义React组件 class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; } } 二:声明prop类型与默认prop class Hello extends React.Component { // ... } Hello.propTypes = { value: Re

  • React组件的三种写法总结

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

  • React点击事件的两种写法小结

    目录 React点击事件写法 1.bind绑定(推荐) 2.箭头函数 React点击事件不好用,可能是被其他组件遮挡 React点击事件写法 1.bind绑定(推荐) 第一个参数指向this,第二个参数开始才是事件函数接收到的参数,事件对象event默认是最后一个参数. ... clicked(param,event){     console.log(param) //hello world     console.log(event.target.value) //按钮 } render()

  • Android中点击事件的四种写法详解

    Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法:使用内部类 基本步骤如下: 1. 新建一个MyOnClickListener类并实现View.OnClickListener接口 2. 重写View.OnClickListener接口中的OnClick(View view)方法 3. 给Button绑定一个监听器,并监听一个点击事件 示例代码如下

  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结

    目录 不使用 Redux 的写法 最底层的写法 React-Redux React-Redux 配合 connect 高阶组件 React-Rudex 配合 React Hooks Redux Toolkit 总结 Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新. Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态.对于这种情况,如果通过 props 层层传递,代码会

  • android中在Activity中响应ListView内部按钮的点击事件的两种方法

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

  • React Router6.x路由表封装的两种写法

    目录 一. 标签形式 二. 对象形式 三. 实现一个经典的左目录右内容布局结构(使用对象路由方式) 一. 标签形式 src 文件夹下创建一个 routers 文件夹,用于存放路由表 src/routers 文件夹下创建一个 index.js 文件,用于设置路由表 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import App from "../App"; im

  • Android中activity跳转按钮事件的四种写法

    具体实现代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 方法1. 采用实现OnClickListener接口的类 ((Button) findViewById(R.i

  • 微信小程序 接入腾讯地图的两种写法

    微信小程序 接入腾讯地图的两种写法

    最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案, 刚处理了这个地图的问题,在这里总结下,希望可以帮助大家. 在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route 一.调用腾讯本身的地图 实现结果如下图: 这个非常简单,而且用的人也很多, 只需要调用两个地图的api. 就是上边的两个.当然调用openLocation的时候你首先要调用getLocation授权 需要你在app.json里配置信息,如下: 在你需要

  • Android实现按钮点击事件的三种方法总结

    Android实现按钮点击事件的三种方法总结

    目录 一.匿名内部类实现 二.接口实现 三.布局实现 Button是程序用于和用户进行交互的一个重要控件,相信大家对这个控件已经非常熟悉了,我们平时用的最多的控件之一.既然有Button,那肯定有onClick方法,下面就教大家三种实现点击事件的方法,大家选择一种自己喜欢的方式写就可以了. 我们先在layout文件里面放置一个Button控件,很简单,让它水平和垂直都居中,Button里面的文字也居中对齐,字体大小15sp,内容为“我是按钮”,具体代码如下: <RelativeLayout xm

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • JavaScript判断变量是否为undefined的两种写法区别

    JavaScript判断变量是否为undefined的两种写法区别

    工作中我们经常需要判断某个变量/属性是否为undefined.通常有两种写法 复制代码 代码如下: // 方式1 typeof age === 'undefined'; // 方式2 age === undefined 这两种写法有什么区别吗? 应该使用哪一种呢?看看下面的例子 复制代码 代码如下: typeof age === 'undefined'; // true 标识符 age 没有声明过,输出true. 再看另一个例子 复制代码 代码如下: age === undefined; //

随机推荐