React function传递参数

最新推荐文章于 2025-01-03 10:06:30 发布

原创最新推荐文章于 2025-01-03 10:06:30 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文详细介绍了在React中如何正确地处理按钮点击事件，包括类组件与函数组件中事件绑定的区别，以及如何传递参数给事件处理函数。

前言

rect 不能写 onClick={this.textValue()} 因为我们是在渲染区域进行写的他就会认为要调用这个函数

所以你会发现在渲染的时候就被调用了所以要写成 onClick={this.textValue}

这样子就只是在onClick上面绑定了一个数值

当页面进行触发的时候他回去类里面去找这个绑定的数值，发现是个Function 就会执行方法

类组件但是传参你就会发现没了

解决

错误

<button onClick={ function(){ this.textValue(this.state.tabs)   }}>你好啊</button>

代码解析

在代码渲染的时候绑定个函数点击的时候先去触发函数然后通过函数进行绑定

错误点方法调用方法会开启严格模式，在严格模式下就可以用了

正确

<button onClick={() =>{  this.textValue(this.state.tabs)   }}>你好啊</button>

代码解析

将父级的this 绑定到事件上面这样就可以拿到数据

import React, { useState } from "react";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
// import WitRouter from "../../router/witRouter"
import  {gou} from '../../App'
import { Badge, TabBar } from 'antd-mobile'
import News from '../News/index'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
export  default  class Home extends  React.Component{
    // navigate = useNavigate();
    GoNews =  () => {
          gou()
        // WitRouter("cityList","张三")
        console.log(this)
        // this.props
        // this.navigconsate("cityList")
    }
    textValue(){

    }
    state = {
           tabs :[
            {
                key: 'home',
                title: '首页',
                icon: () =>  <AppOutline />,
                badge: Badge.dot,
            },
            {
                key: 'cityList',
                title: '找房',
                icon: () =>  <UnorderedListOutline /> ,
                badge: '5',
            },
            {
                key: 'message',
                title: '咨询',
                icon: (active) =>
                    active ? <MessageFill /> : <MessageOutline />,
                badge: '99+',
            },
            {
                key: 'personalCenter',
                title: '我的',
                icon: () =>  <UserOutline />,
            },
        ]
    }
    textValue = (value) =>{
         console.log(value)

    }
    setActiveKey = (event) =>{
           let value = "赵峰"
           gou(event,value)
    }
    render() {
        console.log(this.state)
        return <div>主页组件
              <Link to="/home/news">首页</Link>
                <button onClick={ function(){ this.textValue(this.state.tabs)   }}>你好啊</button>
                <button onClick={() =>{  this.textValue(this.state.tabs)   }}>你好啊</button>
                <button onClick={this.GoNews}>点击进行跳转</button>
                <TabBar onChange={this.setActiveKey}>
                    {this.state.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
                {/*<TabBar activeKey={activeKey} onChange={setActiveKey}>*/}
                {/*    {this.state.tabs.map(item => (*/}
                {/*        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />*/}
                {/*    ))}*/}
                {/*</TabBar>*/}



                {/*<TabBar safeArea>*/}
                {/*    {this.state.tabs.map(item => (*/}
                {/*        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />*/}
                {/*    ))}*/}
                {/*</TabBar>*/}

              <Outlet></Outlet>
        </div>
    }
}

函数组件

嘿嘿》》》》这个时候

第一个模式就可以用了

为啥呐这个是因为在函数里面不存在this 也就是说就算你用箭头函数，或者bind 这些都不能用了

但是函数的组件是全局的可以过原型链从调用的那层找到最外层为止

import React  from "react";
import { useLocation } from 'react-router-dom'
import  classes from './index.module.css'
import Textconst  from '../../Textcontext/textcontext'
import News from "../News";
import {render} from "react-dom";
export  default function CityList  () {

    React.useEffect( ()=>{
            return () => {
                  // 销毁函数
            }
    },[])
    // useEffect  = componentUnMount componentDidMount ComponentDidUpdate
    // 检测函数
    let [age,setAge]  = React.useState(10)
    const refcity  = React.useRef()
    const a =  useLocation()
    const chengName  = function(event) {
      console.log("??????????")
        console.log(event)
        // console.log(refcity,":cdslvdsjvkldjsiv")
    }
    const Changevalue = function () {
                        setAge("20")
    }
    return (
        <Textconst.Consumer>
            { (value) =>{ return <div>
                <div ref={refcity}>
                    {value.name}</div>

                <div value={age} onClick={ () => {  chengName(age)}}>"改变数据的值"</div>
                <span value={age}>"姓名:"{age}</span>
                <span value={age}>"姓名:"</span>
                <div></div>
                <div></div>

                <div className={classes.BuColor} onClick={Changevalue}>"kkkk"</div>
                    <button className={classes.BuColor} onClick={chengNam => { return "value"} }>城市选择页面</button>
                    <News age={age}></News>
                </div>
                 }
            }

        </Textconst.Consumer>
            );
}
// export default class CityList extends React.Component {
//
//      componentDidMount() {
//          let Cetvalue = function(){
//               let a =  useLocation()
//              return  (a)
//          }
//          console.log(Cetvalue())
//          // console.log(useLocation())
//
//      }
//
//     render() {
//          return <div>城市选择页面</div>
//      }
// }