React中Hook使用案例-阿里云开发者社区

开发者社区> 小周sir> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
22598 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4068 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6910 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4479 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5457 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5727 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9425 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2140 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载