【React Hooks】useRefの使用例コピペで確認

import React, { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  const submit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <div className="App">
      <form action="/">
        <input type="text" ref={inputRef} />
        <button type="submit" onClick={submit}>Send</button>
      </form>
    </div>
  );
}

export default App;

src /
  |-- App.css
  `-- App.js

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  width: 100%;
  height: 200vh;
  display: flex;
  margin-top: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

import React, { useRef } from "react";
import './App.css';

function App() {
  const bottomRef = useRef(null);
  const ScrollToBottom = () => {
    bottomRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
    });
}

  return (
    <div className="App">
      <button onClick={ScrollToBottom}>scroll</button>
      <div ref={bottomRef}>bottom</div>
    </div>
  );
}

export default App;

import React, { useState, useRef } from "react";

function App() {
  const [toggle, setToggle] = useState(false);
  const inputRef = useRef(0);

  return (
    <div className="App">
      {inputRef.current}
      <butotn onClick={() => { inputRef.current++ }}> + </butotn>
      <button onClick={() => { setToggle(!toggle) }}>show</button>
    </div>
  );
}

export default App;