React中Hook使用案例

简介: React中Hook使用案例

React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式,改用了函数形式,通过一个小案例,理解对react hook的认知
在这里插入图片描述

安装react脚手架

create-react-app react-hook

创建一个组件FileSearch

在组件中引入react hook api

import React, { useState, useEffect} from 'react'

函数编写,useState是react自带的一个hook函数,它的作用是用来声明状态变量。分别是声明、读取、使用(修改)。

  • 在这定义inputAction用于控制切换显示和隐藏。value定义input值,FileSearch 接收从其他组件传过来 值和方法。
  • inputAction 根据truefalse来切换
const FileSearch = ({ title, onFileSearch }) => {
  const [inputAction, setInputAction] = useState(false)
  const [value, setValue] = useState('')
  
  return (
    <div className="alert alert-primary">
      {!inputAction && (
        <div className="d-flex justify-content-between align-items-center">
          <span>{title}</span>
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              setInputAction(true)
            }}
          >
            搜索
          </button>
        </div>
      )}
      {inputAction && (
        <div className="row">
          <input
            className="form-control col-8"
            value={value}
            ref={inputEl}
            onChange={e => {
              setValue(e.target.value)
            }}
          />
          <button
            type="button"
            className="btn btn-primary col-4"
          >
            关闭
          </button>
        </div>
      )}
    </div>
  )
}

export default FileSearch

引入使用

在app组件引入这个组件,

import FileSearch from './components/FileSearch'

在页面中使用

<FileSearch
            title="React Hook"
            onFileSearch={value => {
              console.log(value)
            }}
          />

搜索框事件

seEffect用于处理组件中的effect,通常用于请求数据,事件处理,订阅等相关操作。

  • 在一些业务中,在input框中,输入内容的时候,一般喜欢按回车键,完成一些操作,
  useEffect(() => {
    const handleInputEvent = event => {
      const { keyCode } = event
      if (keyCode === 13 && inputAction) {
        //   键盘回车键
        onFileSearch(value)
        setValue('')
      } else if (keyCode === 27 && inputAction) {
        // 键盘esc
        closeSearch(event)
      }
    }
    document.addEventListener('keyup', handleInputEvent)
    return () => {
      document.removeEventListener('keyup', handleInputEvent)
    }
  })
  • 在键盘按住ESC键的时候,触发清空内容,定义一个closeSearch 方法
 //清空内容
  const closeSearch = e => {
    e.preventDefault()
    setInputAction(false)
    setValue('')
  }

input聚焦方法

通过hook一个useRef可以实现,当我们点击搜索按钮切换到input框中,自动聚焦。
useRef 返回一个可变的 ref 对象,其 current属性被初始化为传入的参数(initialValue)返回的 ref 对象在组件的整个生命周期内保持不变。

onst inputEl = useRef(null);

在input框中绑定ref

<input  ref={inputEl} />

通过useEffect去实现,第二个参数,一定要写是在inputAction存在的时候执行这个,不然就会一直执行

  useEffect(() => {
    if (inputAction) {
      // current` 指向已挂载到 DOM 上的文本输入元素
      inputEl.current.focus()
    }
  }, [inputAction])

最终所有的代码

import React, { useState, useEffect, useRef } from 'react'

const FileSearch = ({ title, onFileSearch }) => {
  const [inputAction, setInputAction] = useState(false)
  const [value, setValue] = useState('')
  const inputEl = useRef(null)
  //清空内容
  const closeSearch = e => {
    e.preventDefault()
    setInputAction(false)
    setValue('')
  }

  useEffect(() => {
    const handleInputEvent = event => {
      const { keyCode } = event
      if (keyCode === 13 && inputAction) {
        //   键盘回车键
        onFileSearch(value)
        setValue('')
      } else if (keyCode === 27 && inputAction) {
        // 键盘esc
        closeSearch(event)
      }
    }
    document.addEventListener('keyup', handleInputEvent)
    return () => {
      document.removeEventListener('keyup', handleInputEvent)
    }
  })

  //   input聚焦
  useEffect(() => {
    if (inputAction) {
      // current` 指向已挂载到 DOM 上的文本输入元素
      inputEl.current.focus()
    }
  }, [inputAction])

  return (
    <div className="alert alert-primary">
      {!inputAction && (
        <div className="d-flex justify-content-between align-items-center">
          <span>{title}</span>
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              setInputAction(true)
            }}
          >
            搜索
          </button>
        </div>
      )}
      {inputAction && (
        <div className="row">
          <input
            className="form-control col-8"
            value={value}
            ref={inputEl}
            onChange={e => {
              setValue(e.target.value)
            }}
          />
          <button
            type="button"
            className="btn btn-primary col-4"
            onClick={closeSearch}
          >
            关闭
          </button>
        </div>
      )}
    </div>
  )
}

export default FileSearch
目录
相关文章
|
3月前
|
存储 前端开发 JavaScript
最适合新手学习的react案例-Todolist尊享版!
【8月更文挑战第13天】最适合新手学习的react案例-Todolist尊享版!
57 2
最适合新手学习的react案例-Todolist尊享版!
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
54 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
33 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
50 6
React技术栈-基于react脚手架编写评论管理案例
|
2月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
33 2
|
3月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
33 0
|
4月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
26 3
|
4月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
93 1
|
4月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
49 0
|
4月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
40 0