React技巧之表單提交獲取input值

  • 2022 年 6 月 29 日
  • 筆記

正文從這開始~

總覽

在React中，通過表單提交獲得input的值：

  1. 在state變數中存儲輸入控制項的值。
  2. 在form表單上設置onSubmit屬性。
  3. 在handleSubmit函數中訪問輸入控制項的值。
import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('firstName 👉️', firstName);
    console.log('lastName 👉️', lastName);

    // 👇️ clear all input values in the form
    setFirstName('');
    setLastName('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={event => setFirstName(event.target.value)}
          value={firstName}
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

get-form-input-value-on-submit.gif

受控控制項

我們使用useState鉤子來跟蹤輸入控制項的值。我們在控制項上設置onChange屬性，因此當控制項上的值更新時，我們更新相應的state變數。

form表單上的button元素具有submit類型，所以每當按鈕被點擊時，form表單上的submit事件就會被觸發。

當form表單被提交時，我們在handleSubmit函數中使用event.preventDefault() ，以此來阻止form表單頁面刷新。

為了獲得表單提交時的輸入值，我們只需訪問state變數。如果你想在表單提交後清空控制項值，可以設置state變數為空字元串。

不受控控制項

類似地，可以使用不受控制的輸入控制項。

  1. 在每個輸入控制項上設置ref屬性。
  2. 在form元素上設置onSubmit屬性。
  3. 在ref對象上訪問input的值，比如，ref.current.value 。
import {useRef} from 'react';

const App = () => {
  const firstRef = useRef(null);
  const lastRef = useRef(null);

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('first 👉️', firstRef.current.value);
    console.log('last 👉️', lastRef.current.value);

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          ref={firstRef}
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          ref={lastRef}
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

上述示例使用了不受控制的輸入控制項。需要注意的是，輸入控制項沒有onChange屬性或者值設置。

你可以用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屬性，因為這將使輸入控制項不可變，你將無法在其中鍵入。

reset

如果你想在表單提交後清除不受控制的input值，你可以使用reset()方法。

reset()方法還原表單元素的默認值。不管你的表單有多少不受控制的輸入控制項，只要調用reset()方法就可以清除所有的欄位。

當表單被提交時，獲取輸入控制項值的另一種方法是，使用name屬性訪問表單元素。

const App = () => {
  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // 👇️ access input values using name prop
    console.log('first 👉️', event.target.first_name.value);
    console.log('second 👉️', event.target.last_name.value);

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

event對象上的target屬性引用form元素。

你不會經常看到這種方法，如果你不想在state中存儲輸入控制項的值或使用ref對象，就可以使用這種方法。這主要是一種快速和不整潔的解決方案。

最常用的方法是將input值存儲在state變數中。從任何地方訪問state變數的能力允許高度可訂製的表單。

VirMach 便宜 VPS

QNews

QNews