验证后重置 React Form 值答案

【问题标题】：Resetting React Form values after validation验证后重置 React Form 值
【发布时间】：2022-01-09 15:44:54
【问题描述】：

在重置表单中输入字段的值时遇到了这个问题。并想问是否有人知道更好的方法来做到这一点，而不是仅仅为每个字段都设置“useState”......

    const handleSubmit = (e) => {
        e.preventDefault();
        
        emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
        .then((result) => {
            console.log(result.text);
        }, (error) => {
            console.log(error.text);
        });

        setMessage(true);
        setEmail("");
        setName("");
        setSubject("");
        setTextarea("");
    };

    return (
        <div className="contact" id="contact">
            <div className="left">
                <img src="" alt="" />
            </div>
            <div className="right">
                <h2>Kontakt</h2>
                <form ref={formRef} onSubmit={handleSubmit}>
                    <label>Name</label>
                    <input onChange={(e) => setName(e.target.value)} type="text" placeholder="Name" name="user_name" value={name} />
                    <label>Email</label>
                    <input onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" name="user_email" value={email} />
                    <label>Betreff</label>
                    <input onChange={(e) => setSubject(e.target.value)} type="text" placeholder="Subject" name="user_subject" value={subject} />
                    <label>Nachricht</label>
                    <textarea onChange={(e) => setTextarea(e.target.value)} placeholder="Message" name="message" value={textarea} />
                    <button type="submit">Send</button>
                    {message && <span>Thanks we will respond ASAP.</span>}
                </form>
            </div>
        </div>
    )
}

【问题讨论】：

如果您不希望每个字段都有一个状态，您可以让一个状态（一个对象）负责所有字段，然后实现useReducer 来处理状态更新。
Recoil 也有状态重置功能
@jsejcksn 使用库只是为了重置状态有点矫枉过正，不是吗？
@MartinZ 仅仅使用 React 来实现一个表单是不是有点矫枉过正？我们不知道他的应用程序有多复杂。
@jsejcksn 考虑到标题包含“React 表单”，我怀疑他已经在使用 React

标签： javascript reactjs javascript-framework

【解决方案1】：

您可以为所有表单值使用单一状态（有点像我们在功能组件之前所做的）

// this could be outside your component
const initialState = { email: "", name: "", subject: "", textArea: ""};
// declaring your state
const [formState, setFormState] = React.useState(initialState);

然后

    const handleSubmit = (e) => {
    e.preventDefault();
    
    emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
    .then((result) => {
        console.log(result.text);
    }, (error) => {
        console.log(error.text);
    });

    setMessage(true);
    setFormState(initialState)
};

您还必须重写输入处理程序。像这样：

<input onChange={(e) => setFormState({...formState, name: e.target.value})} type="text" placeholder="Name" name="user_name" value={name} />

【讨论】：

在根据前一个状态静音状态时，您应该在 setState-function 中使用 prevState 回调。即：setFormState((prevFormState) => ({...prevFormState, name: e.target.value})
感谢@MartinZ 和 user17578550 给我这些有用的例子，我很感激！！