如何添加图像 src 以反应状态和设置状态

Question

我正在制作一个应用程序，该应用程序必须要求在 <img/> 标签上传递 handleChange 以响应以将 image.src 存储到状态

 import React, { Component } from 'react'  
export class App extends Component {  
 render() {  
        const selectCountryChange = () => {  
            const img = document.querySelector('#img-country');  
            const select = document.querySelector('#country');  
            img.src = \`https://flagpedia.net/data/flags/h80/${select.selectedOptions\[0\].dataset.countrycode.toLowerCase()}.webp\`;  
        };  
        return (  
 <div>  
 <select id="country">  
 <option data-countryCode="IN" value="91">India</option>  
 <option data-countryCode="US" value="1">US</option>  
 <option data-countryCode="GB" value="44">UK</option>  
 </select>  


 <div class="image">  
 <img src="" id="img-change">  
          </div>  
            </div>  
        )  
    }  
}  
export default App

任何人都可以告诉我如何添加状态管理以对 img.src

作出反应

Answer 1

您可以使用 select 的 onChange 事件来更改组件在 selected 时的状态。

export class App extends Component {  
  state={
    imageSrc:'',
    imageAlt:''
  }

  handleChange(e){
    const countryCode=e.target.getAttribute('data-countryCode').toLowerCase()
    this.setState({
      imageSrc:'https://flagpedia.net/data/flags/h80/'+countryCode+'.webp',
      imageAlt:countryCode
    })
  }

  render() {  
         return (  
  <div>  
    <select id="country" onChange={this.handleChange}>  
      <option data-countryCode="IN" value="91">India</option>  
      <option data-countryCode="US" value="1">US</option>  
      <option data-countryCode="GB" value="44">UK</option>  
    </select>  


      <div class="image">  
        <img src={this.state.imageSrc} id="img-change" alt={this.state.imageAlt}/>  
      </div>  
  </div>  
         )  
     }  
 }  

export default App;

如何添加图像 src 以反应状态和设置状态

how to add image src to react state and setstate

reactjs

setstate

react-state-management

imgsource