如何在使用Reducer后清除输入

Question

我使用useReducer来控制我的2个输入：

const [noteInput, setNoteInput] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{
title: '',
content: ''
}
);

点击按钮后，我希望两个输入都被清除。在使用Reducer之后，我如何才能做到这一点？

Answer 1

您可以使用setState将您的状态更新为空，或者您可以调度其他操作将该状态更新为空白字符串。https://redux.js.org/basics/reducers#reducers

Answer 2

如果你只是想使用useReducer来清除表单，你可以使用dispatch来完成。让我们以这个按钮组件为例。

//Component
<Button onClick={() => {dispatch({ type: "CLEAR_FORM"})}}>Submit</Button>

在点击按钮"之后；CLEAR_FORM"；被发送到减速器。

//Form Initial State & Reducer switch statement
export const initialState={
username:"",
password:""
}
export const reducer = (state, action) => {
switch(action.type){
case: "CLEAR_FORM":
return {
username:"",
password:"",
}
default:
return state
}
} 

当reducer获得{type:"LOG_OUT&"}时，在这种情况下，它将用户名和密码字段重置为空字符串。

https://reactjs.org/docs/hooks-reference.html#usereducer

Answer 3

您可以将第三个参数传递给React.useReducer((，名为init。这被称为延迟初始化，是一种快速恢复到初始状态的方法。

https://reactjs.org/docs/hooks-reference.html#lazy-初始化

Answer 4

如果你有一个按钮，你只需要更改onSubmit={handleSubmit}并拥有下面的功能，一切都会好起来的。只需记住不要设置任何TextField的defaultValue或您正在使用的内容，只需设置值

const handleReset = (event) => {
event.preventDefault();
Object.keys(formInput).forEach((inputKey) => {
setFormInput({ [inputKey]: '' });
});
};