通常我们是这样收集表单信息的，添加state及对应的set function

如果有n个field那么我们就得添加n个 【state及对应的set function】

但是一旦表单多起来，比如n等于15，那么将是灾难性的，大量重复的代码，而且不易维护

借助es6的属性解构，我们可以简化我们的工作量

来看更新后的代码：

import React, { useState } from 'react'

type User = {
  name: string;
  email: string;
  address: string;
}

function App() {
  const [user, setUser] = useState<User>({
    name: '',
    email: '',
    address: ''
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value,
    })
  }

  console.log("user", user)

  return (
    <>
      <section>
        <div>
          <input type="text" name='name' placeholder='name'
            value={user?.name}
            onChange={handleChange}
          />
        </div>
        <div>
          <input type="text" name='email' placeholder='email'
            value={user?.email}
            onChange={handleChange}
          />
        </div>
        <div>
          <input type="text" name='address' placeholder='address'
            value={user?.address}
            onChange={handleChange}
          />
        </div>
        <button>submit</button>
      </section>
    </>
  )
}

export default App

我们在表单里输入点什么看看