从另一个选择列表更改inttelinput的国家

Change country of intlTelInput from another select list

本文关键字：inttelinput 国家 另一个 选择 列表      更新时间：2023-09-26

我想根据另一个选择列表更改在intl-Tel-Input中选择的国家。例如，如果在国家选择列表中选择马来西亚，则intl-Tel-Input应更改为马来西亚，并应显示其旗帜和代码。类似地，如果国家更改为美国，则intl-Tel-Input应相应更改。

任何帮助都是感激的。

问候。

我会简单地创建一个js对象"kind of json格式"，其中包含所有的国家代码与特定的名称，并动态地尝试改变输入占位符一旦国家选择匹配使用javascript

如果你正在使用React，这里是解决方案

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

保持跟踪国家是否被更改。

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

告诉你它现在要改变了

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

改变现在。

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>
    )
}

基本上是重新渲染国家的变化

相关文章：