时间戳

首页 > 解决方案 > 在reactjs中更改图像onclick

reactjs - 在reactjs中更改图像onclick

问题描述

const imagesPath = {
  eligibilitypng: "C:/Users/DHANUNJAY/datri/src/validatemoilenumberpng.png.",
  validatemoilenumberpng: "C:/Users/DHANUNJAY/datri/src/eligibilitypng.png"
}
         
class App extends Component {        
  state = {
    open: true
  }  
  toggleImage = () => {
    this.setState(state => ({ open: !state.open }))
  }

  getImageName = () => this.state.open ? 'eligibilitypng' : 'validatemoilenumberpng' 
  render() {    
    const imageName = this.getImageName();

    return (           
      <HashRouter>        
       <nav className="nav">         
        <div>      
        <div className="content">
        <div class="donorTitle"><b>Donor Registration</b></div>  <br/>    
          <ul className="header">  
          <div class="sibling-fade">

            <font size="18px" color="white"><li> <NavLink to="/"><img src={eligibilitypng} onClick={this.toggleImage}/></NavLink></li></font>
            <li> <NavLink to="/ValidateMobileNumber"><img src={validatemoilenumberpng}/> </NavLink></li> 
            
        </div>      
             <Route exact path="/" component={EligibilityCheck}/> 
            <Route path="/ValidateMobileNumber" component={ValidateMobileNumber}/>
            
            </div>      
        </nav>    
        </HashRouter>          
    );     
  }      
}          
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
      
export default App;

我已经获取了路由器链接并在其中插入了图像。图像显示一切都很好。但，

我的问题是，当我单击第二个路由器链接时，我想将第二个路由器链接图像转移到第一个路由器链接图像，并将第一个路由器链接图像转移到第二个路由器链接图像。

试图在切换的帮助下解决这个代码，但它不起作用我担心这个任务。

标签： reactjs

解决方案

import eligibilitypng from "C:/Users/DHANUNJAY/datri/src/validatemoilenumberpng.png.";
import validatemoilenumberpng from "C:/Users/DHANUNJAY/datri/src/eligibilitypng.png";


<li onClick={this.toggleImage}>{this.state.open ? <img src={eligibilitypng} /> : <img src={validatemoilenumberpng } />}</li>

推荐阅读