“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情”

1. 简介

在 实际开发中，我们经常需要提交数据，如果有大量的数据需要提交我们如果使用一个useState对应一个字段的话就会显得不方便操作，冗余代码，因此我们需要使用到表单Form来提交数据。

2. 代码案例

1. 不使用表单方式提交数据

这样的方式就是一个字段就是一个useState，数据少还好， 如果字段太多，字段名动态的话就束手无策了。

import {useState} from 'react'

function App() {
    const [name, setName] = useState("")
    const [password, setPassword] = useState("")

    const handleSubmit = (val?: any) => {
        event.preventDefault();
        console.log({
            name,
            password
        })
    }

    return <>
        <form onSubmit={handleSubmit} action="/">
            <div>
                姓名
                <input type="text" onChange={(val) => setName(val.target.value)}/>
            </div>
            <div>
                密码
                <input type="text" onChange={(val) => setPassword(val.target.value)}/>
            </div>
            <button type="submit">提交</button>
        </form>
    </>
}

export default App

2. 使用表单优化

给每个输入空间给定一个name值，再通过js的方式获取，但前提还是需要知道操作组件的name名称，只是不需要再定义多个useState

import {useState} from 'react'

function App() {

    const handleSubmit = (form?: any) => {
        event.preventDefault();
        console.log({
            name: form.target.name.value,
            pass: form.target.pass.value
        })
    }

    return <>
        <form onSubmit={handleSubmit} action="/">
            <div>
                姓名
                <input type="text" name="name"/>
            </div>
            <div>
                密码
                <input type="text" name="pass"/>
            </div>
            <button type="submit">提交</button>
        </form>
    </>
}

export default App

3. 继续优化，支持动态name

这次我们添加了一个新的方法，handleInputChange 用来监听每一个input组件的change事件，从而修改我们的状态，由此可以获取到动态name的数据

import {useState} from 'react'

function App() {
    const [formData, setFormData] = useState({})

    function handleInputChange(event?: HTMLInputElement) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        setFormData({
            ...formData,
            [name]: value
        })
        console.log(formData)
    }

    const handleSubmit = (form?: any) => {
        event.preventDefault();
        console.log(formData)
    }
    
    const v = 1

    return <>
        <form onSubmit={handleSubmit} action="/">
            <div>
                姓名
                <input type="text" name={"name" + v} onChange={handleInputChange}/>
            </div>
            <div>
                密码
                <input type="text" name="pass" onChange={handleInputChange}/>
            </div>
            <button type="submit">提交</button>
        </form>
    </>
}

export default App

4. 使用第三方antd UI的表单

由于使用第三方组件库我们就不再需要定义useState状态来控制数据，直接由组件内部帮我们封装好的，直接使用即可，这是一套优秀的UI组件，它已经帮我们做了大量的封装，只需要在表单上配置接收一个onFinish方法就可以获取到数据了，他还有数据验证等其他操作。

import React from 'react';
import {Button, Form, Input} from 'antd';

const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

const App: React.FC = () => (
    <Form
        initialValues={{remember: true}}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
    >
        <Form.Item
            label="用户名"
            name="username"
            rules={[{required: true}]}
        >
            <Input/>
        </Form.Item>

        <Form.Item
            label="密码"
            name="password"
            rules={[{required: true}]}
        >
            <Input.Password/>
        </Form.Item>

        <Form.Item wrapperCol={{offset: 8, span: 16}}>
            <Button type="primary" htmlType="submit">
                Submit
            </Button>
        </Form.Item>
    </Form>
);

export default App;

3. 总结

1. 通过本次学习我们在需要存储很多数据的时候的三种选择
2. 数据量少的，直接使用原生方式获取
3. 数据量多并且有动态字段的就监听每一个字段的change事件来修改数据
4. 再则直接使用第三方组件来帮助我们完成这些操作，一切基于配置