При нажатии кнопки условная карточка не отображается в пользовательском интерфейсе материала содержимого

Question

Вот мой код .

Моя цель: когда я нажимаю кнопку «Войти», в содержимом будет отображаться карточка входа, а при нажатии на кнопку «Зарегистрироваться» в содержимом отобразится карточка регистрации. .

Что касается моего основного теста, я использовал следующий код:

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>
  )
}

И он работает. Таким образом я попытался отобразить функциональность в разных компонентах. Вроде не работает. Что мне здесь не хватает?

Answer 1

Следующие исправления помогут вам: - Вам нужно сделать компонент 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>
  );
}