更改圖片onMouseover | ReactJs

Question

我有一個卡組件。 它包含圖像和文本。 默認情況下，圖像為redImage，文本為黑色。 Onmouseover在該卡上，默認的redimage應更改為whiteimage，文本需要更改為白色。 我正在使用map方法顯示卡片內容。 現在，我可以改變顏色，同時使用css鼠標懸停，但是，我無法正確更改圖像。 但是，我可以在懸停時更改圖像，如果我沒有通過直接在組件中硬編碼內容來使用地圖功能。 僅使用map方法后，我正面臨着這個問題。 請讓我知道，我怎樣才能做到這一點。 請在下面找到我的代碼。

/***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);

Answer 1

“好吧，我也陷入了類似的問題，但我得到的解決方案真正起作用只是在你的反應項目的公共文件夾中創建一個圖像文件夾

現在我在其中一個反應組件中創建了一個標簽：

<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 “

Answer 2

回答我的問題，

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);