0
<div>1</div>

の1をreactjsを使って取得したいです。
純javascriptであれば、getelementbyidから簡単に取得できますが、reactの場合どのプロセスを辿って取得することになりますか?
functionコンポーネントでrefを使い実現したいです。

1 件の回答 1

1

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>

2
  • ありがとうございます。 すみません、質問足らずでした。 <div>1</div>の数字だけを取得したいです。 useRefから <div>1</div>の塊の取得はできました。 1のみを取得したい場合追加でどのような処理を行うことで実現できますか?
    – penguin
    2020年6月21日 4:58
  • コメント分の回答を追記しました。 ref.current は設定したHTMLElementが取得されるのでそのままDOMのAPIが利用可能です。また、stateを外側に定義することでrefからアクセスせずに利用する方法も念の為追記しておきました。一般的には後者の実装ですが、ref経由でなければ取得できない事情でしたらスキップしてください。
    – himenon
    2020年6月21日 6:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。