React处理多表单输入

代码语言：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>
    )
}

react button email form 表单

0 人点赞