- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在制作注册表单,以下是我的代码片段:
const Signup = () => {
const [username, setUsername] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordConfirmation, setPasswordConfirmation] = useState('')
const clearState = () => {
setUsername('')
setEmail('')
setPassword('')
setPasswordConfirmation('')
}
const handleSubmit = signupUser => e => {
e.preventDefault()
signupUser().then(data => {
console.log(data)
clearState() // <-----------
})
}
return <JSX />
}
export default Signup
每个状态都用于表单的受控输入。
本质上,我想要做的是在用户成功注册后,我希望状态返回到清除字段的初始状态。
在clearState
中手动将每个状态设置回空字符串是非常必要的我想知道React是否有一个方法或函数可以将状态重置回其初始值?
最佳答案
遗憾的是,没有内置方法可以将状态设置为其初始值。
您的代码看起来不错,但如果您想减少所需的功能,您可以将整个表单状态放入单个状态变量对象中并重置为初始对象。
示例
const { useState } = React;
function signupUser() {
return new Promise(resolve => {
setTimeout(resolve, 1000);
});
}
const initialState = {
username: "",
email: "",
password: "",
passwordConfirmation: ""
};
const Signup = () => {
const [
{ username, email, password, passwordConfirmation },
setState
] = useState(initialState);
const clearState = () => {
setState({ ...initialState });
};
const onChange = e => {
const { name, value } = e.target;
setState(prevState => ({ ...prevState, [name]: value }));
};
const handleSubmit = e => {
e.preventDefault();
signupUser().then(clearState);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};
ReactDOM.render(<Signup />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
关于reactjs - 使用 React Hooks 重置为初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54895883/
我很好奇如何从服务器管理初始状态。例如,我们在页面上有一个按钮,只有在用户获得授权后才能启用该按钮。我看到两个选项,但都有缺点: 在 ComponentWillMount() 中,从服务器获取信息。缺
我有一个听另一个集团的集团。更新后flutter_bloc打包至 version 6.0.2 ,监听器在初始状态下不会再调用。 class BlocA extends Bloc { final B
我正在为我的 React 应用程序使用 redux。我正在从 api 获取用户数据,用它更新 redux 状态并将其显示到我的组件中。数据是对象列表。导致我出现问题的是设置 redux 初始状态。 r
我想观察一个由完全独立的代码修改的 ObservableList。我的问题是,我不仅希望在列表更改时调用 ListChangeListener(当我附加监听器时,列表可能已经包含元素),而且我还希望将
正如标题所说,我需要将 TextView、ImageView 和其他 View 重置为初始状态。例如,在触摸该特定 View 后,会播放一个动画,并且它的动画会(视觉上)销毁该 View 。 现在我需
我已经开始开发一个 react native 应用程序,但我的 ListView 的初始化出现问题。 我正在使用react-native-db-models插件来存储和检索我的数据 问题是我想在rea
我正在对时间序列数据使用 lstm。我有关于时间序列的不依赖于时间的特征。想象一下该系列的公司股票以及非时间系列功能中的公司位置之类的东西。这不是用例,但它是相同的想法。对于此示例,我们只预测时间序列
我有一个参与者模型,带有 state_machine last_action。我想根据角色属性设置last_action 的初始值。如果角色为“导师”,则初始值为“值1”,而如果角色为“学生”,则初始
我已经为 LavaLamp 滑动菜单集成了代码,到目前为止效果很好(我遇到了一些问题,但能够通过阅读面板快速解决它们)但是有一件令人沮丧的事情妨碍了我。当您最初加载页面时,菜单悬停背景位于错误的位置,
我想根据从 Home.js 获得的现有 Prop 在 reducer.js 中设置初始状态 我试图调用 home: this.props.homedata 来设置初始状态,但它不起作用。 import
在我的程序中,我有多个网格,但它们非常相似,因此我决定为所有网格制作一个 reducer ,以保持我的代码美观且干燥。当我分派(dispatch)事件以更改存储时,我将网格名称作为参数与有效负载一起发
我是 React 的新手,正在尝试构建一个具有购物车功能的应用程序,用户可以在其中将机器人添加到购物车。我正在使用 Context API 在整个应用程序中提供购物车,并使用 useReducer 为
我是 React 的新手,正在尝试构建一个具有购物车功能的应用程序,用户可以在其中将机器人添加到购物车。我正在使用 Context API 在整个应用程序中提供购物车,并使用 useReducer 为
我有一个功能: test :: String -> State String String test x = get >>= \test -> let test' = x ++ tes
我是 Redux 和 React 的新手,我正在尝试编写一些基本代码。我遇到了一个看起来很愚蠢但无法解决的问题。 这是片段 import React from 'react'; import Reac
我是 JS/React-native 新手,对于如何正确管理 map 初始状态有点困惑。 我有以下组件: import React from 'react'; import { StyleSheet,
嗨,我最近开始使用 Angular 和 Node,但立即遇到了问题。 我有一个简单的 Controller ,用于获取单个对象。一切正常,但我希望能够在 Controller 内初始化范围变量。我不知
我正在使用tf.nn.dynamic_rnn在 tensorflow 中运行 LSTM。我有一个由 N 个初始状态向量组成的张量和一个由 M = N * n 个输入组成的张量。每个系列由n个输入项组成
在 Angular 1.5 应用程序中使用 UIRouter,我在尝试为我的 Angular 模块设置初始状态时遇到问题。 我已经创建了几个没有 URL 的状态(因为我不需要实际路由),我想在模块实例
我是一名优秀的程序员,十分优秀!