验证后重置 React Form 值

Posted 2023-02-22

【中文标题】验证后重置 React Form 值

【英文标题】：Resetting React Form values after validation

【发布时间】：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=""  />
            </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

【参考方案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 给我这些有用的例子，我很感激！！