zoukankan      html  css  js  c++  java
  • xml ui

    returns a 'ref' object.

    const refContainer = useRef(initialValueToBePersisted)
    

    Value is persisted in the refContainer.current property.

    values are accessed from the .current property of the returned object.

    The .current property could be initialised to an initial value e.g. useRef(initialValue)

    The object is persisted for the entire lifetime of the component.

    Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

    You might be familiar with refs primarily as a way to access the DOM. If you pass a ref object to React with <div ref={myRef} />, React will set its .current property to the corresponding DOM node whenever that node changes.

    However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

    This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

    Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

    function TextInputWithFocusButton() {
      const inputEl = useRef(null);
      const onButtonClick = () => {
        // `current` points to the mounted text input element
        inputEl.current.focus();
      };
      return (
        <>
          <input ref={inputEl} type="text" />
          <button onClick={onButtonClick}>Focus the input</button>
        </>
      );
    }
    
    () => {
      const textAreaEl = useRef(null);
      const handleBtnClick = () => {
        textAreaEl.current.value =
          "The is the story of your life. You are an human being, and you're on a website about React Hooks";
        textAreaEl.current.focus();
      };
      return (
        <section style={{ textAlign: "center" }}>
          <div>
            <button onClick={handleBtnClick}>Focus and Populate Text Field</button>
          </div>
          <label
            htmlFor="story"
            style={{
              display: "block",
              background: "olive",
              margin: "1em",
              padding: "1em"
            }}
          >
            The input box below will be focused and populated with some text
            (imperatively) upon clicking the button above.
          </label>
          <textarea ref={textAreaEl} id="story" rows="5" cols="33" />
        </section>
      );
    };
    
    () => {
        const textAreaEl = useRef(null);
        const stringVal = useRef("This is a string saved via the ref object --- ")
        const handleBtnClick = () => {
          textAreaEl.current.value =
          stringVal.current + "The is the story of your life. You are an human being, and you're on a website about React Hooks";
          textAreaEl.current.focus();
        };
        return (
          <section style={{ textAlign: "center" }}>
            <div>
              <button onClick={handleBtnClick}>Focus and Populate Text Field</button>
            </div>
            <label
              htmlFor="story"
              style={{
                display: "block",
                background: "olive",
                margin: "1em",
                padding: "1em"
              }}
            >
              Prepare to see text from the ref object here. Click button above.
            </label>
            <textarea ref={textAreaEl} id="story" rows="5" cols="33" />
          </section>
        );
      };
    
    function App() {
      const [query, setQuery] = React.useState("react hooks");
      // we can pass useRef a default value
      // we don't need it here, so we pass in null to ref an empty object
      const searchInput = useRef(null);
    
      function handleClearSearch() {
        // current references the text input once App mounts
        searchInput.current.value = "";
        // useRef can store basically any value in its .current property
        searchInput.current.focus();
      }
    
      return (
        <form>
          <input
            type="text"
            onChange={event => setQuery(event.target.value)}
            ref={searchInput}
          />
          <button type="submit">Search</button>
          <button type="button" onClick={handleClearSearch}>
            Clear
          </button>
        </form>
      );
    }
    
    

    https://react-hooks-cheatsheet.com/

  • 相关阅读:
    今天刚开通博客,很开心
    ZYNQ双核AMP开发详解(USE_AMP -DUSE_AMP=1 含义和作用详解)
    赛灵思机器学习套件(ML Suite) v1.4 DPU, DNNK
    petalinux add pre-build application to rootfs compile faliure solution
    如何用SDK生成device tree
    Zynq UltraScale+ MPSoC device tree 中 CCF中 clock output数字映射表
    Zynq ZC702平台 QSPI + eMMC实现
    Zynq ZC702平台 Linux + Baremetal AMP实现(一)【快速启动CPU1】
    第五章 任务执行
    第四章 闭锁
  • 原文地址:https://www.cnblogs.com/Searchor/p/13877944.html
Copyright © 2011-2022 走看看