React function传递参数

 前言

      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>
    }
}

函数组件

嘿嘿》》》》 这个时候

第一个模式就可以用了

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

为啥呐这个是因为在函数里面不存在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>
//      }
// }

 多说一句:react 跟写差不多原生的，原生有个方法 event  ,

   js function 关于 （ ），如果你不写（）js 会进行默认传参 如果写了（）就会用你的自定义传参