Блог

У меня есть несколько фотографий в моем проекте react,которые я получаю из своего файла JSON, мне нужно, чтобы он открывался во весь экран, когда я нажимаю на картинку, но картинки открываются все сразу, а не во весь экран, возможно, мой выбор решения не правильный.Я новичок в react, поэтому любая помощь или предложения помогут мне. имейте этот код:

 import React from "react";
import axios from "axios";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import "../App.scss";

export default class Portfolio extends React.Component {
  state = {
    persons: [],
  };
  handleShowDialog = () => {
    this.setState({ isOpen: !this.state.isOpen });
    console.log("cliked");
  };
  //   onClick={() => imageClick()}
  componentDidMount() {
    axios.get("http://localhost:3000/persons.json").then((res) => {
      const persons = res.data;
      this.setState({ persons });
    });
  }
  render() {
    // const imageClick = () => {

    //   }
    return (
      <div className="container">
        <div className="row justify-content-center">
          {this.state.persons.map((person) => (
            <Card key={person.id} className="col-3 axios-items">
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt={person.alt}
                  height="140"
                  image={person.src}
                  title={person.title}
                  onClick={this.handleShowDialog}
                />
                {this.state.isOpen amp;amp; (
                  <dialog
                    className="dialog"
                    style={{ position: "absolute" }}
                    open
                    onClick={this.handleShowDialog}
                  >
                    <img
                      className="image"
                      src={person.src}
                      onClick={this.handleShowDialog}
                      alt="no image"
                    />
                  </dialog>
                )}
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {person.title}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    component="p"
                  >
                    {person.desc}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          ))}
        </div>
      </div>
    );
  }
}
 

Я думаю, что вы тоже можете использовать другое государство..

 import React from "react";
import axios from "axios";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import "../App.scss";

export default class Portfolio extends React.Component {
  state = {
    persons: [],
  };
  handleShowDialog = (id) => {
    this.setState({ ...this.state, selected: id, isOpen: true });
    console.log("cliked");
  };
  handleHideDialog = () => {
    this.setState({ ...this.state, isOpen: false });
    console.log("closed");
  };
  //   onClick={() => imageClick()}
  componentDidMount() {
    axios.get("http://localhost:3000/persons.json").then((res) => {
      const persons = res.data;
      this.setState({ persons });
    });
  }
  render() {
    // const imageClick = () => {

    //   }
    return (
      <div className="container">
        <div className="row justify-content-center">
          {this.state.persons.map((person) => (
            <Card key={person.id} className="col-3 axios-items">
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt={person.alt}
                  height="140"
                  image={person.src}
                  title={person.title}
                  onClick={()=>{this.handleShowDialog(person.id)}}
                />
                {(this.state.isOpenamp;amp;this.state.selected === person.id) amp;amp; (
                  <dialog
                    className="dialog"
                    style={{ position: "absolute" }}
                    open
                    onClick={this.handleHideDialog}
                  >
                    <img
                      className="image"
                      src={person.src}
                      onClick={this.handleShowDialog}
                      alt="no image"
                    />
                  </dialog>
                )}
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {person.title}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    component="p"
                  >
                    {person.desc}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          ))}
        </div>
      </div>
    );
  }
}