```

    <div>1</div>
    
```

の1をreactjsを使って取得したいです。  
純javascriptであれば、getelementbyidから簡単に取得できますが、reactの場合どのプロセスを辿って取得することになりますか？  
functionコンポーネントでrefを使い実現したいです。
CC BY-SA 4.0
2020-06-20T17:05:21.167
67844
2020-06-21T06:35:51.743
2020-06-21T05:01:55.660
29698
29698
question
reactjs
reactでHTMLDivElementを取得したい
## refを利用して取得する場合

ドキュメントに従えば次のように書くことができます。

```

    const Component = () => {
      const ref = React.useRef(null);
      // クリック時に取得する例
      const onClick = () => {
        if (!ref) {
          return;
        }
        console.log(ref.current.innerText); // ここで取得
      };
      return (
        <div>
          <div ref={ref}>1</div>
          <button type="button" onClick={onClick}>Debug</button>
        </div>
      );
    };
    
    ReactDOM.render(<Component />, document.getElementById("root"));
```

```

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
    <div id="root"></div>
```

## `useState`を利用して取得する場合

杞憂かもしれませんが`useState`を利用して外側にHTMLDivElementの値を定義する方法も紹介しておきます。

```

    const Component = () => {
      const [state, updateState] = React.useState("TargetValue");
      const onClick = () => {
        console.log(state);
      };
      return (
        <div>
          <div>{state}</div>
          <button type="button" onClick={onClick}>Debug</button>
        </div>
      );
    };
    
    ReactDOM.render(<Component />, document.getElementById("root"));
```

```

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
    <div id="root"></div>
```

  * <https://ja.reactjs.org/docs/hooks-reference.html#useref>
CC BY-SA 4.0
2020-06-21T01:25:08.377
67852
2020-06-21T06:35:51.743
2020-06-21T06:35:51.743
7997
7997
67844
answer