Change country of intlTelInput from another select list

Question

I want to change the country selected in the intl-Tel-Input based on another select list. eg if Malaysia is selected in the country select list, the intl-Tel-Input should be changed to malaysia and should display its flag and code. similary if the country is changed to United States, the intl-Tel-Input should change accordingly.

Any help is appreciated.

Regards.

Answer 1

我将简单地创建包含所有具有特定名称的国家/地区代码的js对象“ json格式的种类”，并在使用javascript选择的国家/地区匹配后动态尝试更改输入占位符

Answer 2

if you are using React, here is the solution

constructor(){
    super()
    this.state = {
        updated:true
    }
}

To keep tracking if country is being changed.

componentWillReceiveProps(nextProps){
    if(this.props.selectedCountry !== nextProps.selectedCountry){
        this.setState({
            updated:false
        })
    }
}

tells you its going to change now

componentDidUpdate(nextProps){
    if(this.props.selectedCountry !== nextProps.selectedCountry){
        this.setState({
            updated:true
        })
    }
}

Changed now.

render(){
    const { selectedCountry } = this.props;
    var countryCode = 'us'
    if(selectedCountry)
        countryCode = selectedCountry.toLowerCase()

    var field = <Field
         className="ibm-fullwidth urx-country"
         name="phone" 
         onInputChange={this.onInputChange}
         component={this.renderPhoneInput} 
         defaultCountry={countryCode}
        />

    return (
        <span>
        {this.state.updated &&
            <span>{field}</span>
        }
        </span>
    )
}

Basically its is re-rendering on country change.