react 雙向綁定 input useRef

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

HTML

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

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

 

綁定Ref

這邊用的是hookuseRef

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>

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。