Как правильно выбрать selectedOption тега select в реакции? - PullRequest
Новая
       55

Как правильно выбрать selectedOption тега select в реакции?

0 голосов
/ 03 апреля 2020

Я пытался реализовать телефонный сборщик с помощью следующего: 

import React, { Component } from 'react';
import './component_style/telinput.css';
export class telinput extends Component {
    render() {
         const selectCountryChange = ({target}) => {
        const img = document.querySelector('#img');
        const select = document.querySelector('#country');
        const tel = document.getElementById('tel');

        let prevVal = select.value; 

        if(tel.value) tel.value = `${select.value}${tel.value}`;
        else tel.placeholder = `${select.value}${tel.placeholder}`;


        const reg = new RegExp(`(^${prevVal} )`);
        if (reg.test(target.value)) tel.value = tel.value.replace(reg, target.value);
        else tel.value = `${select.value}${target.value}`;




        if(tel.value) tel.value = `${target.value}${tel.value.replace(reg, '')}`;
        else tel.placeholder =  tel.placeholder.replace(reg, target.value);
        prevVal = target.value;


        img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`


    }

        return (
            <div>
                <div className="tel-input">
                    <div className="tel-mechanism">
                        <div className="select-box">
                            <img
                                src="https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png"
                                alt=""
                                id="img"
                            />
                           <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>
                        <div className="input-box">
                            <input type="tel" placeholder=" 956 826 4457" alt="" id="tel" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default telinput;

, но я получил эту ошибку: 

TypeError: Cannot read property '0' of undefined
selectCountryChange
C:/Users/Rahul/Desktop/collegefacemash/src/form/components/telinput.js:20
  17 |      else tel.placeholder = tel.placeholder.replace(reg, target.value);
  18 |      prevVal = target.value;
  19 | 
> 20 |      img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`;
     | ^  21 |  };
  22 | 
  23 |  return (

Я действительно не понял, почему такой в реакции реагирует ошибка, тогда как когда selectedOptions[0] является собственным свойством JavaScript и должно работать хорошо.

Может кто-нибудь сказать мне, что я должен сделать, чтобы исправить это
Спасибо ...

...