reactjs - 按钮单击不会在内容 UI 中显示条件卡
问题描述
这是我的代码。
我的目标是:当我点击登录按钮时,内容将显示登录卡,当我点击注册按钮时,内容将显示注册卡。
至于我的主要测试,我使用了以下代码:
import React,{useState} from 'react'
const Login=()=>{
return(
<form>
<label>Username:</label>
<input type="text" value="username"/>
<label>Password:</label>
<input type="password" value="password"/>
<button>Submit</button>
</form>
)
}
const Register=()=>{
return(
<form>
<label>Name:</label>
<input type="text" value="name"/>
<label>Username:</label>
<input type="text" value="username"/>
<label>Password:</label>
<input type="password" value="password"/>
<button>Register</button>
</form>
)
}
export default function App() {
const [click,setClick]=useState(false)
const handleClick=()=>{
setClick(true)
}
return (
<div>
<button onClick={handleClick}>Login</button>
{click?<Login/>:<Register/>}
</div>
)
}
它有效。通过这种方式,我尝试在不同的组件中呈现功能。好像不行。我在这里想念什么?
解决方案
以下更正将对您有所帮助:-您需要让App
组件负责维护单击状态,然后仅将处理程序(setClick
)传递给AppBar
并且仅将状态(click
)传递给Content
。
import React, { useState } from "react";
import Login from "./Login";
import Register from "./Register";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { Grid } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1
}
}));
function Appbar({ handleClick }) {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
ReactApp
</Typography>
<Button color="inherit" onClick={()=>handleClick(true)}>
Login
</Button>
<Button color="inherit" onClick={()=>handleClick(false)}>
Register
</Button>
</Toolbar>
</AppBar>
</div>
);
}
function Content({ click }) {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container style={{ padding: 80 }} item>
<Grid xs={false} sm={4} />
<Grid xs={12} sm={8} />
{click ? (
<Login onClick={handleClick} />
) : (
<Register onClick={handleClick} />
)}
<Grid />
<Grid xs={false} sm={2} />
</Grid>
</div>
);
}
export default function App() {
const [click, setClick] = useState(true);
const handleClick = (value) => {
setClick(value);
};
return (
<div>
<Appbar handleClick={handleClick} />
<Content click={click} />
</div>
);
}
推荐阅读
- python - Heroku 上的 Flask 应用程序无法检测到另一个文件进行身份验证
- r - 查找每个向量元素所在的范围
- flask - flask开发单终端:不退出flask继续编辑代码
- mysql - 无法将文件加载到 mysql 表:错误代码:2 - 没有这样的文件或目录
- php - 在我的 mysql 表中,在一个单元格中有行,我有数组。如何选择具有特定数组值的行?
- gams-math - gams 指定具有大量零的通量网络(稀疏矩阵)
- java - 在字符串数组中查找字符串值的搜索方法
- javascript - Slack bot 私人频道发布消息
- docker - 为什么在运行 docker 容器后网站会打印 403 禁止的 nginx 错误?
- rest - REST API:将“批量”附加到 api 以在同一资源上创建批量创建?