react 函数高级

什么是高阶函数，返回值函数的叫做高级参数

例如  map(（item）=> {})  foreach(（item）=> {})  setTime(（item）=> {}) 

react 使用高级函数 原因: react 方法触发的是事件的返回值所以 onClick=(event()) 会被直接触发

import React, { useState } from "react";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
// import  getValue from "../useMemo/getValue"
// import WitRouter from "../../router/witRouter"


import  NewAnt from '../newAnt'
import {Button, Form, Space} from 'antd';
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'
import GetValue from "../useMemo/getValue";
export  default  class Home extends  React.Component{
    name = "kdvkfjvfkvjk"
    // navigate = useNavigate();
    GoNews =  () => {
        gou()
        // WitRouter("cityList","张三")
        console.log(this)
        // this.props
        // this.navigconsate("cityList")
    }
    textValue(){
     console.log(this)
    }
    changVlaue = (event) => {
        if(this.state.name){
             clearTimeout(this.state.name)
        }

    }


    state = {
        sentValue:'',
        name:"",
        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: 'userState',
                title: '我的',
                icon: () =>  <UserOutline />,
            },
        ],

        antThree:[
            {
                label:"Checkbox",
                name:"disabled" ,
                valuePropName:"checked",
                value:["张三","张浩楠","赵敏"]
            },
            {
                label:"Radio",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"Input",
                name:"disabled" ,
                valuePropName:"checked",
                // 插槽配置器
                soltNmae:"选择其器",
                // 反向控制传参
                typeClick:this.changVlaue
            },
            {
                label:"Select",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"Cascader",
                name:"disabled" ,
                valuePropName:"checked",
                value:["张三","张浩楠","赵敏"]
            },
            {
                label:"DatePicker",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"InputNumber",
                name:"disabled" ,
                valuePropName:"checked",
            },
            {
                label:"TextArea",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"Upload",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"TextArea",
                name:"disabled" ,
                valuePropName:"checked"
            },{
                label:"Button",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"Button",
                name:"disabled" ,
                valuePropName:"checked"
            },
            {
                label:"Button",
                name:"disabled" ,
                valuePropName:"checked"
            },



        ]
    }
    senFunction = (name) => {
        return (value) => { console.log(value,name)}
    }
    textValue = (value) =>{
        console.log(this.name)

    }
    sentValue = (event) =>{
        console.log(typeof  event.target.value,"????????")
        // console.log(event.target.value,"event.target.value")

        let  obj = new Function('name',event.target.value)
        // 框架封装数据模
         const data =  [ {name:"输入框",fun:obj}]
        console.log(  obj,"????????")
        // 框架模拟器
        let html  = `<html><head><title>"Mytite"</title></head> <body> <p onclick= ${data[0]['fun']} >cjvhvcjvhcvhkjcxcjxc</p> </body><script> const data = ${[...data]}</script> </html>`
        let blob =  new Blob([html],{type: "text/html"});
        let link  = document.createElement("a")
        link.href  = URL.createObjectURL(blob)
        link.download = "my-page.html"
        link.click()
        // this.state.name = setTimeout(() => {console.log(event.target.value)}, 2000)
        // obj("jdjdjjd")
         // let  fun =   event.target.value
         //   fun()
        // JSON.parse(event.target.value)

        // this.setState({...this.state,sentValue:event.target.value
    // })
    }
    setActiveKey = (event) =>{
        let value = "赵峰"
        gou(event,value)
    }
    render() {
        console.log(this.state)
        return <div>主页组件
            {/*<getshow > dddff</getshow>*/}
            {/*<NewAnt antThre={this.state.antThree}>*/}
            {/*    <div slot={"选择其器"}><input value='自定会议数据'/></div>*/}
            {/*    <div slot={"选择其器二"}><button>我是替换选择其的er</button></div>*/}
            {/*</NewAnt>*/}

            <GetValue value={this.state.sentValue}></GetValue>
            <input onClick={this.sentValue}  placeholder="请输入值"/>

            <input onClick={this.senFunction("name")}  placeholder="请输入值名称"/>
            <input onClick={this.senFunction("value")}  placeholder="请输入值value"/>
            <input onClick={this.senFunction("sage")}  placeholder="请输入值sjjjjj"/>

            {/*<button onClick={this.sentValue}>发送</button>*/}
            <button className="name" 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>
    }
}