react 雙向綁定 input useRef

react 並不像 vue 那樣直接 v-model就可以使用了，hook中有提供一個useRef的方法，讓我們可以輕鬆取得input的value。

HTML

首先我們先有一個 input 組件和一個按鈕。

<Input />
<Button>查看</Button>

綁定Ref

這邊用的是hook的useRef

import React, { useRef } from "react";

const inputRef = useRef(null);

<Input
  style={{ width: "auto" }}
  ref={inputRef}
/>

取得資料

可以先看inputRef裡面有哪些東西，看看value是不是放在current裡面。

const handleSubmit = () => {
  console.log(inputRef.current.value);
}

<Button
  type="primary"
  onClick={handleSubmit}
>
  查看
</Button>