前端react 按钮的处理

2021-03-23 09:47发布

四个按钮分别一对一对应鼠标的左右键和滑轮的滚动,按下,我如何通过不同的鼠标事件去点击按钮让按钮的默认事件变成我点击的那个鼠标事件

四个按钮分别一对一对应鼠标的左右键和滑轮的滚动,按下,我如何通过不同的鼠标事件去点击按钮让按钮的默认事件变成我点击的那个鼠标事件

5条回答
杨晓春
2楼 · 2021-03-24 09:22

react 按钮

代码

[removed][removed][removed][removed][removed][removed]
[removed]//在这里写react代码const element="Hello React";//function Square(props){   return(         {props.value}          );}ReactDOM.render(,document.getElementById("example"));[removed]

显示一个按钮,按钮上面的文本,可以通过value来设置

调用了组件Square

value,是组件的一个属性

function Square(props)

function函数声明关键字,

Square函数名,或者组件名

props组件的属性

每一个组件,都有属性

props.value

组件的value属性


我是大脸猫
3楼 · 2021-03-26 10:26

给个标识判断一下,是哪个就执行哪个事件

4楼 · 2021-03-27 17:34

给个标识判断一下,是哪个就执行哪个事件

小小收藏家
5楼 · 2021-03-28 20:53

给个标识判断一下,是哪个就执行哪个事件

猫的想法不敢猜
6楼 · 2021-04-02 09:45

一、简单的方法

1.效果图

2.代码


import React, { Component } from 'react';

import './App.css';

import on from './on.png';

import off from './off.png';

class App extends Component {

constructor(props) {

super(props);

this.state = {

touchState: false

}

}

touchStart() {

this.setState({ touchState: !this.state.touchState });

}

render() {

return (

<>< style>

{this.state.touchState ? 'open' : ''}

);

}

}

export default App;

3.注意:其中on.png,off.png需要放到对应目录下,这两张图片需要提前下载,下图是我的文件目录


4.注意:很多时候,由于页面内可能不止一个按钮,为了使每个按钮互相不影响,应该将上面的单独写一个js文件,封装起来,在需要按钮的地方再引入进去,这样按钮之间点击不会受影响


二、通过从父组件设置值,传入子组件(推荐使用)实现父子组件之间的传值


1.子组件ToggleButton.js


此处的... props.data,要根据你父组件设置的值打印出来看结构才能确定。


import React, { Component } from "react";

import on from './on.png';

import off from './off.png';

class ToggleButton extends Component {

  constructor(props) {

    super(props);

    this.state = {

      ... props.data

    };

  }

  touchStart() {

    this.setState({ bottom:!this.state.bottom });

  }

  render =()=> {

    console.log('this.state.text',this.state.text)

    return (

     

         <>        <>{><>      <>    );<>  }<>}<>><>><><>只粘贴部分重要代码<><>><>><>  ><>    ><>  }<>  ><>    ><>      <><>         < /><>      <>    );<>  }<>}<> <><><>————————————————<>版权声明:本文为><>原文链接:><>来源于网络仅供参考

相关问题推荐

  • 回答 10

    不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。...

  • react组件生命周期?2020-06-11 20:09
    回答 8

    组件的生命主要包括3个阶段: 挂载、更新、卸载挂载:     constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......

  • 回答 6

    无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...

  • react中的key的作用2020-07-24 10:56
    回答 4
    已采纳

    通常认为当 React 元素内包含数量或顺序不确定的子元素时,需要提供 key 属性来定位元素是否已经存在。在实际使用中可以认为 key是一个接口,用来对哪些元素新建,哪些元素删除。比如现有一个List,每个组件新增时需要用ID向后端发起请求(函数应该放在didmou...

  • 回答 3

    前端常用的一个框架

  • 回答 2

    我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。

  • 回答 1

    创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。

  • 回答 5

    import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...

没有解决我的问题,去提问