Re: 新手让网页 act 起来: Day07 - Form

Form 一直都是网页中重要的功能，今天就让我们来了解在 React 处理 Form 该注意的事情吧！

Controlled Component

在撰写一个表单的时候我们常常都会使用到表单 Element，像是：input、textarea 和 select 。这三个与一般的 HTML Element 不太一样，它们内部能够保有自己的 state。例如：

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <button type="submit">送出</button>
</form>

当我们在 input 输入完後按下送出，form 会记住使用者输入的值并与相对应的 label 一起送出。在 React 中会把有这样子行为的 element 称作 Uncontrolled Component。（其实就是把资料交给原生处理）

所以相反的什麽是 Controlled Component？就是这个 element 将 state 交给 React 来控管，我们就会称它为 Controlled Component。

接下来我们就来练习一下，如何写一个 controlled component 的表单吧！

首先，我们可以使用 React.useState()，来建立一个 state 。关於 useState 在後面的文章会再详细介绍。

const [name, setName] = React.useState('')

然後再 input 的 value 属性挂上 name state

<form>
  <label>
    Name:
    <input type="text" name="name" value={name} />
  </label>
  <button type="submit">送出</button>
</form>

这个时候打开 console 会发现一个警告的错误跳出来

会有这个错误讯息主要是因为我们将 state 交给 React 控管了，但是我们并没有在这个 input 挂上 onChange，导致这个 input 是无法编辑的，所以如果我们要让使用者能够自由的输入，我们还必须挂上 onChange 事件。

const handleChange = (e) => {
  setName(e.target.value)
}

<form>
  <label>
    Name:
    <input type="text" name="name" value={name} onChange={handleChange} />
  </label>
  <button type="submit">送出</button>
</form>

最後，我们再将 onSubmit 事件挂在 form element 上，让 React 来控管 form submit 的行为。完整的程序如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id='root'></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>


  <script type='text/babel'>
    function App() {

      const [name, setName] = React.useState('')

      const handleChange = (e) => {
        setName(e.target.value)
      }

      const handleSubmit = (e) => {
        e.preventDefault()
        alert('A name was submitted: ' + name)
      }

      return (
        <form onSubmit={handleSubmit}>
          <label>
            Name:
            <input type="text" name="name" value={name} onChange={handleChange} />
          </label>
          <button type="submit">送出</button>
        </form>
      )
    }

    ReactDOM.render(<App />, document.getElementById('root'))
  </script>

</body>

</html>

顺利的话，当我们按下送出，就可以看见 alert 的视窗，并印出我们输入的名子。

最後来做个总结，当我们使用 Controlled component 等於是让 React 来控管 form element ，使用者所输入的内容都会透过事件来更新 React 的 state 来确保说我们 form element 的内容永远会跟 state 是一样且同步的，如此一来，我们能够对使用者的输入的内容进行操作，例如：设定初始值或是验证等等。

以上就是今天的内容了，有什麽问题都欢迎在下方留言。

<<: Day8:EndPoint for Microsoft Defender 警示和事件

>>: Webview问题集(下)－常用功能

Re: 新手让网页 act 起来: Day07 - Form

Controlled Component

轻松小单元 - 常见问题

软件工程师(ASP.NET)面试心得分享

Day 23 AWS的云上排队服务-SQS

#02 No-code 之旅 — Next.js 简介

【设计+切版30天实作】｜Day19 - 切版 - Heroheader - 怎麽切出满版heroheader？

如何拥有一个好的网页设计

[Day12 - React Native] 为你的 APP 加入 icon - Android

[Day 16] - Django View , Url -- 功能执行的要角

Day6－D3 资料绑订 Data Binding：资料状态enter、update、exit

RDS Transacrion