更改图片onMouseover | ReactJs

时间：2019-06-25 08:49:43

标签： javascript reactjs material-ui

我有一个卡组件。它包含图像和文本。默认情况下，图像将为redImage，文本为黑色。在该卡上鼠标悬停后，默认的红色图像应更改为白色图像，文本需要更改为白色。我正在使用地图方法显示卡上的内容。 现在，我可以更改颜色，而使用CSS将鼠标悬停在鼠标上时，但是我无法正确更改图像。但是，如果我不通过直接在组件中对内容进行硬编码，则可以在悬停时更改图像。仅使用地图方法后，我面临问题。请让我知道，我该如何实现。请在下面找到我的代码。

/***App***/

import React,{ Component } from 'react';
import SchDic from './SchDic'

class App extends Component {
constructor(props){
super(props);

this.state ={
Lists : [
{id:1, imgRed:require('../assets/images/red/das-red.svg'), imgWhite: require('../assets/images/white/das-whi.svg'),
Name: 'All-in-1 Dashboard',
Details:'Easily navigate the simple-to-use dashboard to track your volunteers, manage your opportunities and relationships, and gain access to advanced reporting.'},
{id:2, imgRed:require('../assets/images/red/scr-red.svg'), imgWhite: require('../assets/images/white/dig-whi.svg'),
Name: 'Screening Organizations',
Details:'Control the opportunities visible to your students by screening organizations. Invite your partnered nonprofits.' },
{id:3, imgRed:require('../assets/images/red/dig-red.svg'), imgWhite: require('../assets/images/white/pos-whi.svg'),
Name: 'Digitize Submission',
Details:'View all your student submissions to see what’s pending, approved or rejected.'},
{id:4, imgRed:require('../assets/images/red/tra-red.svg'), imgWhite: require('../assets/images/white/scr-whi.svg'),
Name: 'Tracking & Reporting',
Details:'Get up-to-date reports about how students are progressing with their commitments or requirements. Gain access to customizable analytics about individuals or groups of students.'},
{id:5, imgRed:require('../assets/images/red/pos-red.svg'), imgWhite: require('../assets/images/white/sup-whi.svg'),
Name: 'Post School-Run Events',
Details:'Get administration involved by postings school-run volunteering events directly on your private Opportunity Board..'},
{id:6, imgRed:require('../assets/images/red/sup-red.svg'), imgWhite: require('../assets/images/white/tra-whi.svg'),
Name: 'Support',
Details:'Get access to tons of resources on our FAQ or contact our team directly. We take pride in our commitment in helping you build your community.'},
],
};
}
render() {
return (
<div className="App" >
<SchDic Lists = {this.state.Lists}/>
</div>
);
}
}

export default App;

/***SchDiv***/

import React,{ Component } from 'react';
import { Card,CardMedia,CardHeader,CardContent,Typography,withStyles } from '@material-ui/core';

const Styles = {
card: {
width:'385px',
height:'241px',
padding:'0px',
margin:'15px',
cursor: 'pointer',
'&:hover': {
background: '#E8583E',
color:'white',
}
},

media: {
height: 41,
maxWidth:41,
margin:'15px',
},

name:{
padding:'1px',
margin:'15px',

},
details:{
fontSize: '14px',
padding: '0 15px',
minHeight: '25px',
align: 'left',
},
};

class SchDic extends Component {
constructor(props){
super(props);
this.state = {
value: 0,
img: require('../assets/images/red/das-red.svg'),
imgOne: require('../assets/images/red/dig-red.svg'),
imgTwo: require('../assets/images/red/pos-red.svg'),
imgThree: require('../assets/images/red/scr-red.svg'),
imgFour: require('../assets/images/red/sup-red.svg'),
imgFive: require('../assets/images/red/tra-red.svg'),

};
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
} 
handleChange = (event, value) => {
this.setState({ value });
};

handleMouseOver(val) {
if(val === 0){
this.setState({
img: require('../assets/images/white/das-whi.svg')
});
} else if(val === 1){
this.setState({
imgOne: require('../assets/images/white/dig-whi.svg')
});
} else if(val === 2){
this.setState({
imgTwo: require('../assets/images/white/pos-whi.svg')
});
} else if(val===3){
this.setState({
imgThree: require('../assets/images/white/scr-whi.svg')
});
} else if(val===4){
this.setState({
imgFour: require('../assets/images/white/sup-whi.svg')
});
} else {
this.setState({
imgFive: require('../assets/images/white/tra-whi.svg')
});
}
}
handleMouseOut(val) {
this.setState({
img: require('../assets/images/red/das-red.svg'),
imgOne: require('../assets/images/red/dig-red.svg'),
imgTwo: require('../assets/images/red/pos-red.svg'),
imgThree: require('../assets/images/red/scr-red.svg'),
imgFour: require('../assets/images/red/sup-red.svg'),
imgFive: require('../assets/images/red/tra-red.svg'),
});
}
render(){
const { classes }= this.props
const { Lists } = this.props;
const Post = Lists.map(List => {
return(
<div >
<Card className={classes.card} onMouseOver={() => this.handleMouseOver(List.id)} onMouseOut={this.handleMouseOut} elevation={1}>
<CardMedia
className={classes.media}
image={List.imgRed}
/>
<CardHeader className={classes.name}
titleTypographyProps={{variant:'h5' }}
title={List.Name}
/>
<CardContent className={classes.details} >
<Typography variant='Body2' color=" " component="p">
{List.Details}
</Typography>
</CardContent>
</Card>
</div>
)}
);
const divStyle = {
paddingLeft:'350px',
paddingRight:'150px',
display: 'flex',
flexWrap: 'wrap',
};
return(
<div className="coreFeatures" style={divStyle} >
{ Post }
</div>
)
}
}

export default withStyles(Styles)(SchDic);

2 个答案:

答案 0 :(得分：0)

“好吧，我也陷入了类似的问题 但是我得到了真正有效的解决方案 只需在ur react project的公共文件夹中创建一个图像文件夹

现在我在react组件之一中创建了一个标签，如下所示：

<img src= {process.env.PUBLIC_URL + '/image/xyz.png'} />

现在我希望通过使用鼠标悬停侦听器来更改此图像

<img src= {process.env.PUBLIC_URL + '/image/xyz.png'} onMouseOver={() => this.changeImg()}/>

我将changeImg函数定义为：

 changeLogo= () => { var a= document.querySelector('.logoA');
               a.setAttribute("src",'./images/logoB.svg')
              }

但是问题是...（只需阅读这篇文章）

https://facebook.github.io/create-react-app/docs/using-the-public-folder“

答案 1 :(得分：0)

回答我的问题，

import React,{ Component } from 'react';
import SchDic from './SchDic'

class App extends Component {
constructor(props){
super(props);

this.state ={
Lists : [
{id:1, imgRed:require('../assets/images/red/das-red.svg'), imgWhite: require('../assets/images/white/das-whi.svg'),
Name: 'All-in-1 Dashboard',
Details:'Easily navigate the simple-to-use dashboard to track your volunteers, manage your opportunities and relationships, and gain access to advanced reporting.'},
{id:2, imgRed:require('../assets/images/red/scr-red.svg'), imgWhite: require('../assets/images/white/dig-whi.svg'),
Name: 'Screening Organizations',
Details:'Control the opportunities visible to your students by screening organizations. Invite your partnered nonprofits.' },
{id:3, imgRed:require('../assets/images/red/dig-red.svg'), imgWhite: require('../assets/images/white/pos-whi.svg'),
Name: 'Digitize Submission',
Details:'View all your student submissions to see what’s pending, approved or rejected.'},
{id:4, imgRed:require('../assets/images/red/tra-red.svg'), imgWhite: require('../assets/images/white/scr-whi.svg'),
Name: 'Tracking & Reporting',
Details:'Get up-to-date reports about how students are progressing with their commitments or requirements. Gain access to customizable analytics about individuals or groups of students.'},
{id:5, imgRed:require('../assets/images/red/pos-red.svg'), imgWhite: require('../assets/images/white/sup-whi.svg'),
Name: 'Post School-Run Events',
Details:'Get administration involved by postings school-run volunteering events directly on your private Opportunity Board..'},
{id:6, imgRed:require('../assets/images/red/sup-red.svg'), imgWhite: require('../assets/images/white/tra-whi.svg'),
Name: 'Support',
Details:'Get access to tons of resources on our FAQ or contact our team directly. We take pride in our commitment in helping you build your community.'},
],
};
}
render() {
return (
<div className="App" >
<SchDic Lists = {this.state.Lists}/>
</div>
);
}
}

export default App;

/***SchDiv***/

    import React,{ Component } from 'react';
import { Card,CardMedia,CardHeader,CardContent,Typography,withStyles } from '@material-ui/core';

const Styles = {
    card: {
        width:'385px',
        height:'241px',
        padding:'0px',
        margin:'15px',
        cursor: 'pointer',
        '&:hover': {
            background: '#E8583E',
            color:'white',
            "& $imgOne": {
                display: 'none'
            },
            "& $imgTwo": {
                display: 'block'
            },
        },
    },
    media: {
        height: 41,
        maxWidth:41,
        margin:'15px',
        "& + $imgOne": {
            display: 'block'
        },
        "& + $imgTwo": {
            display: 'none'
        }
    },
    imgOne: {},
    imgTwo: {},
    name:{
        padding:'1px',
        margin:'15px',
    },
    details:{
        fontSize: '14px',
        padding: '0 15px',
        minHeight: '25px',
        align: 'left',
    },
};

class SchDic extends Component {
constructor(props){
super(props);
this.state = {
value: 0,

};
} 
handleChange = (event, value) => {
this.setState({ value });
};

render(){
    const { classes }= this.props
    const { Lists } = this.props;
    const Post = Lists.map(List => {
    return(
        <div >
            <Card className={classes.card} elevation={1}>
                <CardMedia
                    className={`${classes.media} ${classes.imgOne}`}
                    image={List.imgRed}
                />
                <CardMedia
                    className={`${classes.media} ${classes.imgTwo}`}
                    image={List.imgWhite}
                />
                <CardHeader className={classes.name}
                    titleTypographyProps={{variant:'h5' }}
                    title={List.Name}
                />
                <CardContent className={classes.details} >
                    <Typography variant='Body2' color=" " component="p">
                    {List.Details}
                    </Typography>
                </CardContent>
            </Card>
        </div>
    )}
);
const divStyle = {
paddingLeft:'350px',
paddingRight:'150px',
display: 'flex',
flexWrap: 'wrap',
};
return(
<div className="coreFeatures" style={divStyle} >
{ Post }
</div>
)
}
}

export default withStyles(Styles)(SchDic);
相关问题
最新问题