前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React处理多表单输入

React处理多表单输入

作者头像
明知山
发布2023-07-24 17:32:57
1250
发布2023-07-24 17:32:57
举报
文章被收录于专栏:前端开发随笔前端开发随笔
代码语言:javascript
复制
import { useState } from "react"

const formValue = {
    name: '',
    email: '',
    password: ''
}
export default () => {
    const [form, setForm] = useState(formValue)
    const handleChange = (event) => {
        const { name, value } = event.target
        setForm({ ...form, [name]: value })
    }
    const submitForm = () => {
        console.log(form)
    }
    const resetForm = () => {
        setForm(formValue)
    }
    return (
        <form>
            <input type="text" name="name" value={form.name} onChange={handleChange} />
            <input type="email" name="email" value={form.email} onChange={handleChange} />
            <input type="password" name="password" value={form.password} onChange={handleChange} />
            <button type="button" onClick={submitForm}>提交</button>
            <button type="button" onClick={resetForm}>重置</button>
        </form>
    )
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-07-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档