Q&A

TextField の指定行数にスクロールしたい

function MyTextField() {
  const inputRef = useRef<HTMLInputElement>(null)
  const handleClick = () => {
    if (inputRef.current) {
      const lineHeight = parseInt(getComputedStyle(inputRef.current).lineHeight)
      const rows = /* 移動したい行番号 */
      inputRef.current.scrollTop = rows * lineHeight
    }
  }
  return (
    <>
      <TextField
        label="Label"
        inputRef={inputRef} // input要素にrefを設定する
        multiline
        rows={4}
        defaultValue="Default Value"
      />
      <button onClick={handleClick}>Scroll to Input</button>
    </>
  )
}