[英]I need to make my react-modal change background color whenever I click on a button
所以我有一个图像数组,每个图像都有一个可点击的叠加层,我有一个模式,它根据我点击的叠加层的名称更改背景颜色,我想将其作为道具传递,但是由于图像是生成的,这是不可能的通过 function 并且模态在 function 之外,所以我不能给它所需的值,下面是我的代码:
这是我的 JSON 本地数据:
{
"portfolio": [
{
"id": 1,
"mid":1,
"title": "react",
"image": "/images/portfolio-2/React.jpg"
},
{
"id": 2,
"mid":2,
"title": "angular",
"image": "/images/portfolio-2/Angular.jpg"
},
{
"id": 3,
"mid":3,
"title": "flutter",
"image": "/images/portfolio-2/Flutter.jpg"
},
{
"id": 4,
"mid":4,
"title": "bootstrap",
"image": "/images/portfolio-2/Bootstrap.png"
},
{
"id": 5,
"mid":5,
"title": "unity",
"image": "/images/portfolio-2/Unity.jpg"
},
{
"id": 6,
"title": "photoshop",
"image": "/images/portfolio-2/Photoshop.png"
},
{
"id": 7,
"title": "ionic",
"image": "/images/portfolio-2/Ionic.png"
},
{
"id": 8,
"title": "wordpress",
"image": "/images/portfolio-2/Wordpress.jpg"
}
]
}
这是我的 ReactJS 代码:
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
PortfolioS,
PortfolioTitle,
Span,
Box,
ImageWrapper,
Image,
Overlay,
OverlaySpan,
} from "./PortfolioStyle.jsx";
import { ProjectModal } from "./ModalStyle.jsx";
export default function Portfolio(props) {
const [images, setImages] = useState([]);
const [open, setOpen] = useState(false);
useEffect(() => {
axios.get("Data/Data.json").then((res) => {
setImages(res.data.portfolio);
});
}, []);
const PortfolioImages = images.map((imageItem) => {
return (
<React.Fragment>
<ImageWrapper key={imageItem.id}>
<Image src={imageItem.image} alt="" />
<Overlay name={imageItem.title}>
<OverlaySpan
name={imageItem.title}
onClick={() => {
setOpen(!open);
test = imageItem.title;
}}
>
View Projects
</OverlaySpan>
</Overlay>
</ImageWrapper>
</React.Fragment>
);
});
return (
<PortfolioS id={"portfolioSection"}>
<div className="container">
<PortfolioTitle>
<Span>My</Span> Portfolio
</PortfolioTitle>
<Box>{PortfolioImages}</Box>
<ProjectModal
isOpen={open}
onRequestClose={props.clearSelectedOption}
ariaHideApp={false}
>
<h2>Modal Title</h2>
<p> Just a test</p>
<button
onClick={() => {
setOpen(!open);
}}
>
Close test
</button>
</ProjectModal>
</div>
</PortfolioS>
);
}
我的第一个外部样式组件文件如下:
import styled from "styled-components";
export const PortfolioS = styled.div`
margin-top: 150px;
padding-top: 100px;
background: #f8f8f8;
margin-top: 300px;
overflow: hidden;
@media (max-width: 575px) {
display: block;
margin: auto;
}
`;
export const PortfolioTitle = styled.h1`
text-align: center;
font-size: 35px;
color: #1761a0;
`;
export const Span = styled.span`
font-weight: normal;
color: #eb5424;
`;
export const Box = styled.div`
@media (max-width: 575px) {
width: 100%;
}
`;
export const ImageWrapper = styled.div`
width: 25%;
float: left;
font-size: 0;
position: relative;
&:hover > div {
opacity: 1;
}
`;
export const Image = styled.img`
width: 100%;
@media (min-width: 576px) and (max-width: 768px) {
width: 50%;
}
`;
export const Overlay = styled.div`
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 15px;
opacity: 0;
${(props) => {
if (props.name === "react") {
return `
background: rgba(0, 145, 255, 0.5);
`;
} else if (props.name === "angular") {
return `
background: rgba(255, 0, 0, 0.5);
`;
} else if (props.name === "flutter") {
return `
background: rgba(255, 255, 255, 0.5);
`;
} else if (props.name === "bootstrap") {
return `
background: rgba(115, 0, 255, 0.5);
`;
} else if (props.name === "unity") {
return `
background: rgba(255, 255, 255, 0.5);
`;
} else if (props.name === "photoshop") {
return `
background: rgba(88, 150, 255, 0.5);
`;
} else if (props.name === "ionic") {
return `
background: rgba(255, 255, 255, 0.5);
`;
} else {
return `
background: rgba(255, 255, 255, 0.5);
`;
}
}}
`;
export const OverlaySpan = styled.span`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
padding: 10px 20px;
cursor: pointer;
border: 2px solid white;
${(props) => {
if (props.name === "react") {
return `
background: #33ccff;
`;
} else if (props.name === "angular") {
return `
background: #ff0000;
`;
} else if (props.name === "flutter") {
return `
background: #0099ff;
`;
} else if (props.name === "bootstrap") {
return `
background: #9900cc;
`;
} else if (props.name === "unity") {
return `
background: black;
`;
} else if (props.name === "photoshop") {
return `
background: #3399ff;
`;
} else if (props.name === "ionic") {
return `
background: #1a8cff;
`;
} else {
return `
background: #0099cc;
`;
}
}}
`;
第二个外部样式组件文件:
import styled from "styled-components";
import Modal from "react-modal";
export const ProjectModal = styled(Modal)`
margin: auto;
margin-top: 200px;
width: 250px;
height: 300px;
${(props) => {
if (props.names === "react") {
return `
background: #33ccff;
`;
} else if (props.names === "angular") {
return `
background: #ff0000;
`;
} else if (props.names === "flutter") {
return `
background: #0099ff;
`;
} else if (props.names === "bootstrap") {
return `
background: #9900cc;
`;
} else if (props.names === "unity") {
return `
background: black;
`;
} else if (props.names === "photoshop") {
return `
background: #3399ff;
`;
} else if (props.names === "ionic") {
return `
background: #1a8cff;
`;
} else {
return `
background: #0099cc;
`;
}
}}
`;
您可以通过如下属性设置模态背景:
产品组合 function:
// Create a state for background type
const [backgroundType, setBackgroundType] = useState(null);
// In PortfolioImages => OverlaySpan => OnClick, set the image title for backgroundType
<OverlaySpan
name={imageItem.title}
onClick={() => {
setBackgroundType(imageItem.title);
setOpen(!open);
}}
>
项目模式:
<ProjectModal
backgroundType={backgroundType}
isOpen={open}
onRequestClose={props.clearSelectedOption}
ariaHideApp={false}
>
....
</ProjectModal>
最后,ModalStyles.js:(您的扩展名只能是.js ,因为这不是反应元素)
import styled from "styled-components";
import Modal from "react-modal";
// Instead doing that If's, i created a const to hold the backgroundcolors based on image title
const backgroundColor = {
react: "#33ccff",
angular: "#ff0000",
flutter: "#0099ff",
bootstrap: "#9900cc",
unity: "black",
photoshop: "#3399ff",
ionic: "#1a8cff",
};
export const ProjectModal = styled(Modal)`
margin: auto;
margin-top: 200px;
width: 250px;
height: 300px;
background: ${(props) => {
// And here i set the specifc background color
return props.backgroundType ? backgroundColor[props.backgroundType] : "#0099cc";
}};
`;
希望对你有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.