React技巧之設定input值

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

正文從這開始~

總覽

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

宣告一個state變數，用於跟蹤輸入控制元件的值。
將onClick屬性新增到button元素上。
當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;

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屬性的記憶化物件值。

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

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

React技巧之設定input值

總覽

useState

useRef

相關文章