Javascript 需要创建一个新的隐藏div，在onclick之后显示
我有一个显示经验的组件。我想创建一个选项，在我的体验上面显示一个框，当他们点击一个体验时，可以使用不同的选项。每一次体验我都有不同的选择 这是我的经历 我想创建一个这样的盒子，里面有每个体验的相应图像 这是我的经验部分Javascript 需要创建一个新的隐藏div，在onclick之后显示,javascript,reactjs,Javascript,Reactjs,我有一个显示经验的组件。我想创建一个选项，在我的体验上面显示一个框，当他们点击一个体验时，可以使用不同的选项。每一次体验我都有不同的选择 这是我的经历 我想创建一个这样的盒子，里面有每个体验的相应图像 这是我的经验部分 import React, { memo, useCallback } from 'react'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/styles'
import React, { memo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import Popper from '@material-ui/core/Popper';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';
// Proptypes definitions to the component.
const propTypes = {
/** Custom root className. */
className: PropTypes.string,
};
// Default props definitions.
const defaultProps = {
className: null,
};
// Component's styles
const useStyles = makeStyles(theme => ({
root: {
display: 'block',
margin: '0 auto',
maxWidth: '50%',
[theme.breakpoints.down('md')]: {
maxWidth: '70%',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
},
'& .experiences-column': {
display: 'inline-block',
verticalAlign: 'top',
textAlign: 'center',
'&.col1': {
width: '36.31%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'&.col2': {
width: '63.69%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'& .experience': {
padding: 2,
position: 'relative',
'& img': {
width: '100%',
display: 'block',
},
'& .experience-title': {
position: 'absolute',
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
},
},
},
},
}), { name: 'ExperiencesStyle' });
/**
* Component used to render a grid of experiences.
*
* @param {object} props - The component's props.
* @returns {object} React element.
*/
const Experiences = memo(
(props) => {
const { className } = props;
const classes = useStyles(props);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
const experience = useCallback((img, title) => (
<div className="experience" aria-describedby={id} onClick={handleClick} onClick={() => setAnchorEl(!anchorEl)}>
<img
data-sizes="auto"
className="lazyload"
data-src={img}
alt={title}
/>
<div className="experience-title">
<Typography
color="textSecondary"
variant="subtitle2"
className="highlight highlight1"
display="inline"
>
{ title }
</Typography>
</div>
</div>
), []);
return (
<div className={clsx(classes.root, className)}>
<div className="experiences-column col1">
{experience(gastronomia, 'GASTRONOMÍA')}
{experience(giftcard, 'GIFT CARD')}
{experience(deporte, 'DEPORTE')}
</div>
<div className="experiences-column col2">
{experience(productos, 'PRODUCTOS')}
{experience(diversion, 'DIVERSIÓN')}
{experience(belleza, 'BELLEZA')}
</div>
<Popper id={id} open={open} anchorEl={anchorEl}>
<div className={classes.paper}>
<p>Array of images here depending on category </p>
</div>
</Popper>
</div>
);
},
);
// Component proptypes.
Experiences.propTypes = propTypes;
// Component default props.
Experiences.defaultProps = defaultProps;
export default Experiences;
import React，{memo，useCallback}来自“React”；
从“道具类型”导入道具类型；
从'@material ui/styles'导入{makeStyles}；
从“@material ui/core/Typography”导入排版；
从“clsx”导入clsx；
从“@material ui/core/Popper”导入Popper；
从“资产/体验/gastronomia.jpg”导入gastronomia；
从“assets/experiences/productos.jpg”导入productos；
从“assets/experiences/giftcard.jpg”导入giftcard；
从“资产/经验/分流.jpg”导入分流；
从“资产/经历/驱逐出境.jpg”导入驱逐出境；
从“资产/经验/belleza.jpg”导入belleza；
从“数据/美食”中输入美食经验；
从“数据/产品”导入产品经验；
从“数据/giftcard”导入giftcard经验；
从“数据/转移”导入转移体验；
从“数据/递解出境”导入递解出境经验；
从“数据/belleza”导入BellezaExperience；
//将属性类型定义添加到组件。
常量属性类型={
/**自定义根类名*/
类名：PropTypes.string，
};
//默认道具定义。
const defaultProps={
类名：null，
};
//组件的样式
const useStyles=makeStyles（主题=>({
根目录：{
显示：“块”，
边距：“0自动”，
maxWidth:'50%'，
[主题.breakpoints.down（'md'）]：{
maxWidth:'70%'，
},
[theme.breakpoints.down（'sm'）：{
maxWidth:“100%”，
},
“&.体验专栏”：{
显示：“内联块”，
垂直排列：“顶部”，
textAlign:'中心'，
“&.col1”：{
宽度：36.31%，
[theme.breakpoints.down（'sm'）：{
宽度：'首字母'，
},
},
“&.col2”：{
宽度：63.69%，
[theme.breakpoints.down（'sm'）：{
宽度：'首字母'，
},
},
"经验":{
填充：2，
位置：'相对'，
“&img”：{
宽度：“100%”，
显示：“块”，
},
"及.经验题目":{
位置：'绝对'，
底数：30，
左:0,，
右:0,，
textAlign:'中心'，
},
},
},
},
})，{name:'experiencestyle'}）；
/**
*用于渲染经验网格的组件。
*
*@param{object}props-组件的props。
*@返回{object}元素。
*/
常量经验=备忘录(
（道具）=>{
const{className}=props；
常量类=使用样式（道具）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
const handleClick=事件=>{
setAnchorEl（anchorEl？null:event.currentTarget）；
};
常量开=布尔值（主播）；
const id=open？'simple popper'：未定义；
const experience=useCallback（（img，title）=>(
setAnchorEl（！anchorEl）}>
{title}
), []);
返回(
{体验（美食学，'gastronommÍA'）}
{体验（礼品卡，礼品卡）}
{经历（驱逐，'驱逐'）}
{经验（productos，'productos'）}
{体验（转移，'DIVERSIÓN'）}
{经验（belleza，'belleza'）}
此处的图像数组取决于类别
);
},
);
//组件类型。
Experiences.propTypes=propTypes；
//组件默认道具。
Experiences.defaultProps=defaultProps；
出口违约经验；
{iterateExperience.map（（经验，索引）=>(
))}
const体验=（道具）=>{
const[clicked，setClicked]=useState（true）
返回(
setClicked（！clicked）}
className={单击的“体验”：“单击的体验”}
>
{props.title}
);
}
导出默认体验
如果您不想基于单击来渲染不同的组件，只需添加体验（您也可以应用其他样式-任何您想要的样式）
const体验=（道具）=>{
const[clicked，setClicked]=useState（true）
返回(
setClicked（！clicked）}className='experience'>
{点击？
{props.title}
:
另一个组件}
);
}
{iterateExperience.map（（经验，索引）=>(
))}
const体验=（道具）=>{
const[clicked，setClicked]=useState（true）
返回(
setClicked（！clicked）}
className={单击的“体验”：“单击的体验”}
>
{props.title}
);
}
导出默认体验
如果您不想基于单击来渲染不同的组件，只需添加体验（您也可以应用其他样式-任何您想要的样式）
const体验=（道具）=>{
常量[单击，设置单击]
const iterateExperience = [
{img: gastronomia, title: 'GASTRONOMIA' },
{img: productos, title: 'PRODUCTOS' },
];
<div className={clsx(classes.root, className)}>
{iterateExperience.map((experience, index) => (
<div key = {index}>
<Experience img = {experience.img} title = {experience.title}/>
</div>
))}
</div>
const Experience = (props) => {
const [clicked, setClicked] = useState(true)
return (
<div onClick={() => setClicked(!clicked)}
className={clicked ? 'experience' : 'experience-clicked'}
>
<img
data-sizes="auto"
className="lazyload"
data-src={props.img}
alt={props.title}
/>
<div className="experience-title">
<Typography
color="textSecondary"
variant="subtitle2"
className="highlight highlight1"
display="inline"
>
{props.title}
</Typography>
</div>
</div>
);
}
export default Experience
const Experience = (props) => {
const [clicked, setClicked] = useState(true)
return (
<div onClick={() => setClicked(!clicked)} className='experience'>
{clicked ?
<div>
<img
data-sizes="auto"
className="lazyload"
data-src={props.img}
alt={props.title}
/>
<div className="experience-title">
<Typography
color="textSecondary"
variant="subtitle2"
className="highlight highlight1"
display="inline"
>
{props.title}
</Typography>
</div>
</div>
:
<p>Another Component</p>}
</div>
);
}