七爪源碼：React 專業提示：如何管理表單

如果您使用可變資料處理 Web 應用程式，則必須學習處理表單。 在我看來，理想的使用者體驗是當使用者在輸入字段中看到實際資料，并且可以通過送出按鈕輕松更新它； 我将在本文中解釋 React 應用程式中的表單更新流程。

必須首先從資料庫中提取必須更新的資料，我們需要一個狀态來存儲和顯示在 UI 表單上。

第一步是資料擷取

const App = () => {  const [name, setName] = useState<string>('')
  const [email, setEmail] = useState<string>('')  const getData = async () => {
    const response = await fetch('url...').then((response) => response.json())
    setName(response.name)
    setEmail(response.email)
  }  useEffect(() => {
    getData()
  }, [])  return (
    <form>
      <input type="text" value={name} />
      <input type="text" value={email} />
    </form>
  )
}           

上面我們定義了狀态（姓名，電子郵件），定義了一個擷取資料并将資料值設定為狀态的函數（getData），在元件（頁面）渲染上運作該函數（在 useEffect 中），并将狀态值傳遞給 呈現的輸入字段。

偉大的。 現在，當在輸入字段中更改狀态的值時，必須以某種方式修改狀态。 我們可以通過将狀态設定器函數（setName 和 setEmail）傳遞給帶有 event 參數的輸入 onChange 屬性來實作

event = 在 React 元件中始終可用的對象攜帶有關其目标的資訊，在這種情況下，是輸入字段及其值

是以，我們必須更新我們的輸入字段

更新輸入字段

...return (
    <form>
      <input
        type="text"
        value={name}
        onChange={event => setName(event.target.value)}
      />
      <input
        type="text"
        value={email}
        onChange={event => setEmail(event.target.value)}
      />
    </form>
  )
}           

現在我們隻剩下一件事要做了。 建立一個送出按鈕和一個更新資料庫中資料的函數

建立一個送出按鈕和一個點選它運作的功能

...
const getData = async () => {
   const response = await fetch('url...').then((response) => response.json())
  setName(response.name)
  setEmail(response.email)
}
useEffect(() => {
  getData()
}, [])
const submit = (name: string, email: string) => {
  ...API or service call with name and email arguments
}
return(
    <form>
      <input
        type="text"
        value={name}
        onChange={event => setName(event.target.value)}
      />
      <input
        type="text"
        value={email}
        onChange={event => setEmail(event.target.value)}
      />
      <button onClick={() => submit(name, email)}>
        Submit
      </button>
    </form>
  )           

我們可以将狀态作為參數傳遞給送出函數，因為我們總是使用新的輸入值更新它們。

是以流程基本上是這樣的：

在元件渲染中，我們使用 fetch 中的值更新狀态，不斷更新它們，在送出時，我們将它們作為參數傳遞給送出函數。

我希望你發現這對你尋找新的學習材料很有用。 感謝您抽出時間來閱讀！

關注七爪網，擷取更多APP/小程式/網站源碼資源！