首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React表单即使在提交数据之后也不会重置文本字段

React表单即使在提交数据之后也不会重置文本字段
EN

Stack Overflow用户
提问于 2021-05-23 10:22:52
回答 1查看 155关注 0票数 0

reset表单即使在向服务器提交数据之后也不会重置文本字段。我打过电话给setRegister({...initialState});,但它不关心和不重置字段,有人能告诉我原因是什么吗?

代码语言:javascript
运行
复制
const [formRegister, setRegister] = useState({ _id: "", nomineename: "", email: "", description: "", nominatedby: ""});

const onChange = (e) => {
    e.persist();
    setRegister({ ...formRegister, [e.target.name]: e.target.value });
}
const initialState = {
    _id:"",
    nomineename: "",
    email: "",
    description: "",
    nominatedby: ""
};
const onSubmit = () => {
        const fetchData = async () => {
            try {
                const res = await Axios.post('http://localhost:8000/service/nominateperson', formRegister);
                if (res.data) {
                    console.log("Link token created:" + res.data);
                    const successMessage = res.data.message;
                    setHelperText(successMessage);
                    setRegister({...initialState});
                }
            } catch (e) {
                console.log(e);
                history.push('/errorPage');
            }
        }
        fetchData();
    }

return (
        <div className="App">
            <h1>Nominate Person</h1>
            <form onSubmit={handleSubmit(onSubmit)}  className="linkForm inputForm" >
                <div className="inputField" >
                    <input name="nomineename" 
                    placeholder="nominate a person" 
                    type="text" 
                    {...register('nomineename',{
                        required: "Nominate a person is required !",
                        pattern: {
                          value: /^[a-zA-Z\s]/,
                          message: "Invalid name !"
                        }
                      })
                    }
                      onChange={onChange}
                    /> 
                </div>
                <span className="nominateError"><pre>{errors.nomineename && errors.nomineename.message}</pre></span>
                <div className="inputField" >
                    <input name="email" 
                    placeholder="nominee email" 
                    type="text" 
                    {...register('email',{
                        required: "Nominee email is required !",
                        pattern: {
                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                           message: "Invalid email address !"
                        }
                      })}
                      onChange={onChange}
                    />
                </div>
                <span className="nominateError"><pre>{errors.email && errors.email.message}</pre></span>
                <div className="inputField" >
                    <textarea name="description" 
                    placeholder="reason for nomination"
                    {...register('description',{
                        required: "Description is required !",
                        pattern: {
                            value: /^[a-zA-Z,.!""\s]{10,1000}$/,
                            message: "Min of 10 or not more than 1000 characters !"
                        }
                      })}
                      onChange={onChange}
                    />
                </div>
                <span className="nominateError"><pre>{errors.description && errors.description.message }</pre></span>
                <div className="inputField nominatedby" >
                    <input name="nominatedby" 
                    placeholder="nominated by" 
                    type="text" 
                    {...register('nominatedby',{
                        required: "Nominated by is required !",
                        pattern: {
                          value: /^[a-zA-Z\s]{2,30}$/,
                          message: "Invalid name !"
                        }
                      })}
                      onChange={onChange}
                    /> 
                </div>
                <span className="nominateError"><pre>{errors.nominatedby && errors.nominatedby.message}</pre></span>
                <span className="getlinkbutton">
                    <input type="submit"/>
                </span><br></br><br></br>
                <label>
                    <span className="loginValidationText">{helperText}</span>
                </label>
            </form>
        </div>
    )

https://codesandbox.io/s/xenodochial-tereshkova-51t97?file=/src/App.js

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-23 10:48:23

表单状态由useForm控制,而不是由状态控制。

因此,要重置表单字段/状态,需要使用其reset API

代码语言:javascript
运行
复制
const { reset } = useForm();

const onSubmit = () => {
  reset(initialState);
  const fetchData = async () => {
    try {
      ...
      if (res.data) {
        ...
        reset(initialState);
        setRegister({ ...initialState });
      }
    } catch (e) {
      ...
    }
  };
  fetchData();
};
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67658637

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档