ReactHooks——useRef

使用方法

 const inputValue: any = useRef(null);//声明
 <input type="text" ref={inputValue} onChange={(e)=>{setqiqi(e.target.value)}} />//绑定input
 const gettext = () => {//获取
    setqiqi(inputValue.current.value)
  };
  const cleartext = () => {//赋值
    inputValue.current.value = null;
    setqiqi(inputValue.current.value)
  };

全部代码

import React, { useState, useMemo, useEffect, useRef } from "react";

const Footer = () => {
  const [qiqi, setqiqi]:any = useState(null);//申明一个变量
  const inputValue: any = useRef(null);//申明一个ref
  const gettext = () => {//点击获取input的值
    setqiqi(inputValue.current.value)
  };
  const cleartext = () => {//点击修改input的值
    inputValue.current.value = null;
    setqiqi(inputValue.current.value)
  };
  useEffect(()=>{//变化的时候打印一下
    console.log(qiqi)
  },[qiqi])
  return (
    <div>
      <div>
        <input type="text" ref={inputValue} onChange={(e)=>{setqiqi(e.target.value)}} />
        <div onClick={gettext}>获取</div>
        <div onClick={cleartext}>清空</div>
      </div>
      <div>{qiqi}</div>
    </div>
  );
};
export default Footer;