как добавить изображение sr c в состояние реакции и установить состояние - PullRequest
Новая
       58

как добавить изображение sr c в состояние реакции и установить состояние

0 голосов
/ 08 мая 2020

Я делаю приложение, которое обязательно требует передачи тега handleChange в <img/> в ответ на сохранение 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

1 Ответ

1 голос
/ 08 мая 2020

Вы можете использовать событие onChange select для изменения состояния компонента при выборе страны. 

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