自定义 classNames hooks

昌周

已于 2024-03-07 21:35:15 修改

阅读量533

点赞数 7

文章标签： javascript 前端 react.js

于 2024-03-07 18:54:21 首次发布

本文链接：https://blog.csdn.net/qq_45623378/article/details/136542732

版权

本文介绍了React中的自定义hooks，区分了其与普通函数的区别，重点讲解了如何在jsx中使用并给出了一个登录表单的实例，展示了如何利用hooks进行状态管理和提交表单操作。

摘要由CSDN通过智能技术生成

什么是自定义 hooks

自定义hooks是react提供的编写公共函数的方法

自定hooks 和通用函数的区别

一定有人会说 hooks 可以使用react 的方法，但是公共函数也可以，因为 jsx 语法的原因

函数必须开头进行大写

其实这些都是 react 的语法规范，我们用hooks 也是方便用于管理、

总结： jsx 会将函数开头大写和 use 定义的标识为react 函数可以使用react 内部的属性以及方法

案例

classname

 import { useState,useEffect } from "react"
 const UseClass = (...argus)=> {
  const  [state,setState]  =   useState()
    useEffect(()=> {
        setState(argus.join(" "))
    },[])
    return  state
  } 
export default UseClass

使用

/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from "react"
import {useState} from "react"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import logincss  from './index.module.css'
import  Store from "../../Redux/redux";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
import UseClass from "./className";
const Log =  () => {
    const  usenavigate =  useNavigate()

     //  userstate 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据
     let    [[form],setform] =  useState(Form.useForm())
     const linitform =  {
         password:'123456',
         username:'wangchangzhou'
     }
     const login = () => {
      console.log("deng录")
      // eslint-disable-next-line react-hooks/rules-of-hooks
      usenavigate('/home',{state:{login:true}}) 
      Store.dispatch({type:'login',login:true})
     }
     const valueSet = ()=> {
      const time = null
      if(time){
               clearTimeout(()=> {
                
               })
      }
       
       setTimeout(()=> {
         console.log("KKKKKKK")
       })
     }
     const getValue = ()=> {
          
     }
     useEffect(()=> {
      //  console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),"返回值")
     },[])
        const fundom = (value)=> {
         if(value ==="取消") {
          form.resetFields()
         }else {
          login()
          //   console.log(form.getFieldsValue());
          //  let value = form.getFieldsValue()
          //   console.log(linitform === value)
          //   // eslint-disable-next-line no-unused-expressions
          //      if(linitform.password == form.getFieldsValue().password && linitform.password == form.getFieldsValue().password ){
          //       login()
          //      }
            
         }
       }
       return(
       <>
          <button className={UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick={getValue()}>1</button>
          <button onClick={getValue()}>2jn   kkkkkkkkk</button>
       </>)
//        return(
//         <div className={logincss.log_box}>
//                 <Form
//                 form={form}
//                 className={logincss.log_box_from}
//                 name="normal_login"
//                 initialValues={{
               
//       }}
     
//     >
//       <div>
//           <span style={{fontSize:'20px',textShadow:'4px 4px 4px'}}>低代码测试</span>
//       <Form.Item
//       className={logincss.log_box_item}
//         name="username"
//         label ='名称'
//         rules={[
//           {
//             required: true,
//             message: 'Please input your Username!',
//           },
//         ]}
//       >
//         <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
//       </Form.Item>
//       <Form.Item
//        className={logincss.log_box_item}
//         name="password"
//         label ='密码'
//         rules={[
//           {
//             required: true,
//             message: '请输入密码',
//           },
//         ]}
//       >
//         <Input
//           prefix={<LockOutlined className="site-form-item-icon" />}
//           type="password"
//           placeholder="请输入密码"
//         />
//       </Form.Item>
//       {/* <Form.Item  className={logincss.log_box_item}>
//         <Form.Item name="remember" valuePropName="checked" noStyle>
//           <Checkbox>Remember me</Checkbox>
//         </Form.Item> */}
// {/* 
//         <a className="login-form-forgot" href="">
//            记住密码
//         </a>
//       </Form.Item> */}

//       <Form.Item  className={logincss.log_box_item}>
//         <Button onClick={()=>{ return fundom('登陆') }} type="primary" htmlType="submit" className="login-form-button">
//           登录
//         </Button>
//         <Button onClick={()=>{ return fundom('取消') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">
//           取消
//         </Button>
//       </Form.Item>
//       </div>
//     </Form>
//     <Outlet></Outlet>
//         </div>
//        )
}
export default Log