码迷,mamicode.com
首页 > 其他好文 > 详细

react useRef()函数

时间:2018-12-20 21:33:52      阅读:7450      评论:0      收藏:0      [点我收藏+]

标签:function   put   hand   use   reac   turn   out   clear   setname   

“ref”对象是一个通用容器,其current属性是可变的

保存dom

function Test() {
  const t = useRef(null);

  useEffect(() => {
    l(t.current); // div
  });

  return (
    <div ref={t}> ... </div>
  );
}

保存事件程序

function Test() {
  const t = useRef(null);
  function handleClick() {
    t.current = setTimeout(() => l(1), 2000);
  }
  function handleClear() {
    clearTimeout(t.current);
  }

  return (
    <>
      <button onClick={handleClick}>start</button>
      <button onClick={handleClear}>clear</button>
    </>
  );
}

存储以前的值

function Test() {
  const t = useRef(null);
  const [name, setName] = useState("ajanuw");
  useEffect(() => {
    t.current = name;
  });
  const prevName = t.current;
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <h2>{name}</h2>
      <p>{prevName}</p>
    </div>
  );
}

react useRef()函数

标签:function   put   hand   use   reac   turn   out   clear   setname   

原文地址:https://www.cnblogs.com/ajanuw/p/10152485.html

(2)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!