时间戳

首页 > 解决方案 > 如何在 React JS 中使用 Router 将数据共享到上下文 API 中的一个组件到另一个组件？

reactjs - 如何在 React JS 中使用 Router 将数据共享到上下文 API 中的一个组件到另一个组件？

问题描述

在这里，我创建了两个组件。第一个是 Login.jsx，另一个是 User.jsx。我想使用路由器将与 User.jsx 的数据共享到 Login.jsx。当客户端在 User.jsx 中输入数据然后在此处输入代码客户端单击注册按钮然后组件切换到 Login.jsx 并使用上下文 API 显示 Login.jsx 中的所有数据。

 <div className="user form">
       <h2>User</h2>
       <span>Username</span>
       <input type="text" placeholder="Username" name="uname" onChange={userForm} id="" />
       <span>Password</span>
       <input type="password" name="pwd" id="" placeholder="Password" onChange={userForm} />
       <span>Confirm Password</span>
       <input type="password" name="cpwd" id="" placeholder="Confirm Password " onChange{userForm} />
       <Link to="/" ><button>Resigister</button></Link>
   </div>
   <Switch>
          <Route exact path="/">
                <Mycontext.Provider value={form}>
                    <Login />
                </Mycontext.Provider>
          </Route>
            <Route path="/a" component={Admin} />
        </Switch>

标签： reactjsreact-routerreact-context

解决方案

  1. 更正确认密码输入onChange={userForm}

  2. 将表单数据保存在 state 中，并将数据作为 props 传递。

推荐阅读