<div>1</div>
の1をreactjsを使って取得したいです。
純javascriptであれば、getelementbyidから簡単に取得できますが、reactの場合どのプロセスを辿って取得することになりますか?
functionコンポーネントでrefを使い実現したいです。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するドキュメントに従えば次のように書くことができます。
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>
ref.current
は設定したHTMLElementが取得されるのでそのままDOMのAPIが利用可能です。また、stateを外側に定義することでrefからアクセスせずに利用する方法も念の為追記しておきました。一般的には後者の実装ですが、ref経由でなければ取得できない事情でしたらスキップしてください。