React技巧之設定input值

chuck 發表於 2022-07-03
React

原文連結:https://bobbyhadz.com/blog/react-set-input-value-on-button-click

作者:Borislav Hadzhiev

正文從這開始~

總覽

在React中,通過按鈕點選設定輸入框的值:

  1. 宣告一個state變數,用於跟蹤輸入控制元件的值。
  2. onClick屬性新增到button元素上。
  3. button被點選時,更新state變數。
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  const handleClick = event => {
    event.preventDefault();

    // 👇️ value of input field
    console.log('old value: ', message);

    // 👇️ set value of input field
    setMessage('New value');
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />

      <h2>Message: {message}</h2>

      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

set-input-value-on-button-click.gif

useState

我們使用useState鉤子來跟蹤輸入控制元件的值。我們在控制元件上設定了onChange屬性,因此每當控制元件的值有更新時,handleChange函式就會被呼叫。

handleChange函式中,當使用者鍵入時,我們更新了輸入控制元件的狀態。

我們在button元素上設定了onClick屬性。每當按鈕被點選時,handleClick函式就會被呼叫。

要更新輸入控制元件的狀態,只需更新state變數。如果你需要清除輸入控制元件的值,把它設定為空字串。

或者,你也可以使用不受控制的輸入控制元件。

useRef

import {useRef} from 'react';

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

  function handleClick() {
    // 👇️ update input value
    inputRef.current.value = 'New value';

    // 👇️ access input value
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

上述示例使用了不受控制的input。需要注意的是,輸入控制元件沒有onChange屬性或者value設定。

你可以用defaultValue屬性給一個不受控制的input傳遞一個初始值。然而,這並不是必須的,如果你不想設定初始值,你可以省略這個屬性。

當使用不受控制的輸入控制元件時,我們使用ref來訪問input元素。useRef()鉤子可以被傳遞一個初始值作為引數。該鉤子返回一個可變的ref物件,其.current屬性被初始化為傳遞的引數。

需要注意的是,我們必須訪問ref物件的current屬性,以獲得對我們設定ref屬性的input元素的訪問。

當我們為元素傳遞ref屬性時,比如說,<input ref={myRef} /> ,React將ref物件的.current屬性設定為相應的DOM節點。

useRef鉤子建立了一個普通的JavaScript物件,但在每次渲染時都給你相同的ref物件。換句話說,它幾乎是一個帶有.current屬性的記憶化物件值。

需要注意的是,當你改變refcurrent屬性的值時,不會導致重新渲染。每當使用者點選按鈕時,不受控制的input的值會被更新。

你不應該在一個不受控制的input(一個沒有onChange處理函式的輸入控制元件)上設定value屬性,因為這將使輸入控制元件不可變,你將無法在其中鍵入。