如何使用 React Context 和 Hooks 从父组件重置子组件答案

【问题标题】：How to reset child component from parent using React Context and Hooks如何使用 React Context 和 Hooks 从父组件重置子组件
【发布时间】：2020-03-25 08:52:26
【问题描述】：

我正在玩 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

【问题讨论】：

标签： reactjs react-hooks react-context

【解决方案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>
  );
};

工作示例：

【讨论】：