reactjs - 如何使用 React Context 和 Hooks 从父组件重置子组件

Question

我正在玩 React 上下文和钩子。我想要一个可重用的编辑器组件，我可以在其中编辑用户。然后，我将从 NewUser 和 EditUser 页面使用它，以便 NewUser 将传递一个空用户，而 EditUser 将传递一个现有用户。

这是我如何实现编辑器及其上下文

const UserEditorContext = createContext({
  user: {},
  onSubmit: user => {}
});

const UserEditor = () => {
  const context = useContext(UserEditorContext);
  const [user, setUser] = useState({ ...context.user });
  const setUserProp = e => setUser({ ...user, [e.target.name]: e.target.value });
  const handleSubmit = e => {
    e.preventDefault();
    context.onSubmit(user);
  };
  return (
    <form onSubmit={handleSubmit}>
      Username:{" "}
      <input type="text" name="username" value={user.username} onChange={setUserProp} />
      Password:{" "}
      <input type="password" name="password" value={user.password} onChange={setUserProp} />
      <input type="submit" value="Submit" />
    </form>
  );
};

这就是我从 NewUser 页面使用它的方式

const NewUserPage = () => {
  const [user, setUser] = useState({});
  const createUser = user => {
    alert(JSON.stringify(user)); // todo http post
    setUser({}); // clear form. THIS DOES NOT WORK
  };
  return (
    <UserEditorContext.Provider value={{ user, onSubmit: createUser }}>
      <UserEditor />
    </UserEditorContext.Provider>
  );
};

问题

创建新用户后，我想清除表单。但是，我尝试清除表格setUser({})不起作用。它不会导致任何错误或其他任何事情。它只是不更新​​编辑器控件。

这是完整的示例：https ://codesandbox.io/s/hopeful-tereshkova-dwn8h

标签： reactjsreact-hooksreact-context

Answer 1

您可以setUser从UserEditor组件添加context.onSubmit如下：

const handleSubmit = e => {
  e.preventDefault();
  context.onSubmit(user, setUser);
};

那么NewUserPage组件将是：

const NewUserPage = () => {
  const emptyUser = {
    username: "",
    password: ""
  };

  const createUser = (user, setUser) => {
    alert(JSON.stringify(user)); // todo http post
    setUser(emptyUser); // clear form
  };

  return (
    <UserEditorContext.Provider value={{ user: emptyUser, onSubmit: createUser }}>
      <UserEditor />
    </UserEditorContext.Provider>
  );
};

工作示例：