如何在两个单选按钮之间切换，并且在reactjs中单击它时应该打开一个单独的组件

Question

我正在创建一个登录页面，它有两个不同的组件，分别名为管理员登录和客户登录，它们在登录表单中显示为单选按钮，如果我单击客户登录单选按钮，它应该打开客户登录表单，反之亦然。管理员登录和客户登录均在登录组件中导入。所以我想要条件渲染。 希望大家明白我的问题。 作为参考，我在这里提供图片 我的代码如下：

登录.js

import AdminLogin from "./AdminLogin";
import { useState } from "react";
import CustomerLogin from "./CustomerLogin";

const Login = () => {
  const [Admin, setAdmin] = useState(false);
  const adminHandler = () => {
    setAdmin(!Admin);
  };
  return (
    <>
      {Admin && <AdminLogin handler={adminHandler} />}
      <CustomerLogin />
    </>
  );
};

export default Login;

管理登录.js

import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { Container } from "@mui/material";
import { InputAdornment } from "@mui/material";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import { IconButton } from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";

import { Link } from "react-router-dom";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";

import { useState } from "react";
function AdminLogin() {
  const [values, setValues] = useState({
    password: "",
    showPassword: false,
  });
  const onClickHandler = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };
  const handlePasswordChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get("email"),
      password: data.get("password"),
    });
  };

  return (
    <Container component="main" maxWidth="lg">
      <Box
        sx={{
          marginTop: 8,
        }}
      >
        <Grid container>
          <CssBaseline />
          <Grid
            item
            xs={false}
            sm={4}
            md={6}
            sx={{
              backgroundImage: "url(https://source.unsplash.com/random)",
              backgroundRepeat: "no-repeat",
              backgroundColor: (t) =>
                t.palette.mode === "light"
                  ? t.palette.grey[50]
                  : t.palette.grey[900],
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}
          />
          <Grid
            item
            xs={12}
            sm={8}
            md={6}
            component={Paper}
            elevation={6}
            square
          >
            <Box
              sx={{
                my: 8,
                mx: 4,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <Typography
                component="h1"
                variant="h5"
                sx={{
                  fontSize: "1.6rem",
                  fontWeight: 900,
                  alignSelf: "baseline",
                  // fontFamily: "poppins",
                }}
              >
                Login to Your Account
              </Typography>
              <RadioGroup
                sx={{ mt: 2, alignSelf: "baseline" }}
                row
                aria-labelledby="demo-row-radio-buttons-group-label"
                name="row-radio-buttons-group"
              >
                <FormControlLabel
                  value="Admin"
                  control={<Radio />}
                  label="Admin Login"
                />
                <FormControlLabel
                  value="Customer"
                  control={<Radio />}
                  label="Customer Login"
                />
              </RadioGroup>
              <Box
                component="form"
                noValidate
                onSubmit={handleSubmit}
                sx={{ mt: 1 }}
              >
                <TextField
                  margin="normal"
                  required
                  fullWidth
                  id="email"
                  label=" Admin Email Address"
                  name="email"
                  autoComplete="email"
                  autoFocus
                />

                <TextField
                  margin="normal"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  id="password"
                  autoComplete="current-password"
                  value={values.password}
                  type={values.showPassword ? "text" : "password"}
                  onChange={handlePasswordChange("password")}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton onClick={onClickHandler}>
                          {values.showPassword ? (
                            <VisibilityIcon />
                          ) : (
                            <VisibilityOffIcon />
                          )}
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />

                <FormControlLabel
                  control={<Checkbox value="remember" color="primary" />}
                  label="I accept SLR Trans Privacy Policy and Terms of Use "
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  sx={{ mt: 3, mb: 2, backgroundColor: "#4C9C2D" }}
                >
                  Sign In
                </Button>
                <Grid container>
                  <Grid item xs>
                    <Link to="#" variant="body2">
                      Forgot password?
                    </Link>
                  </Grid>
                  <Grid item>
                    <Link to="/SignUp" variant="body2">
                      "Don't have an account? Sign Up"
                    </Link>
                  </Grid>
                </Grid>
              </Box>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </Container>
  );
}
export default AdminLogin;

Answer 1

根据选定的单选按钮（“管理员登录”或“客户登录”）进行条件渲染非常容易，您需要处理

onChange

的

RadioGroup

事件并根据所选单选按钮的值。

以下是实现这一目标的方法：

1. 在

   Login.js

   中，使用状态变量来跟踪所选的登录类型，它是 React API 之一，如果您知道的话，抱歉，我解释的太基础了。
2. 根据此状态有条件地渲染

   AdminLogin

   或

   CustomerLogin

   组件。
3. 将处理程序函数向下传递给两个组件，以在单击单选按钮时更新

   Login

   组件中的状态。

让我们一步一步来：

第 1 步：设置状态变量以跟踪

Login.js

中选定的登录类型：

const [loginType, setLoginType] = useState('Customer');  // default to 'Customer'

第 2 步：有条件地渲染组件：

return (
    <>
      {loginType === 'Admin' ? <AdminLogin setLoginType={setLoginType} /> : <CustomerLogin setLoginType={setLoginType} />}
    </>
);

第3步：在

AdminLogin.js

中，处理单选按钮选择的变化并通知父组件：

function AdminLogin({ setLoginType }) {
    // ... other code ...

    const handleRadioChange = (event) => {
        setLoginType(event.target.value);
    };

    return (
        // ... other code ...

        <RadioGroup
            sx={{ mt: 2, alignSelf: "baseline" }}
            row
            aria-labelledby="demo-row-radio-buttons-group-label"
            name="row-radio-buttons-group"
            onChange={handleRadioChange}   // Add this line
        >
            <FormControlLabel
                value="Admin"
                control={<Radio />}
                label="Admin Login"
            />
            <FormControlLabel
                value="Customer"
                control={<Radio />}
                label="Customer Login"
            />
        </RadioGroup>

        // ... other code ...
    );
}

但是我确实想知道对于这些类型的条件，您是否最好使用react-router。它得到了维护，并且是一个更干净的 API。但是，玩得开心！！