Reactjs 如何在不重新渲染的情况下更改图标的颜色（文本字段失去焦点）

我正在使用名为

react native phone input

的软件包，当电话号码更改时，它会运行更新状态的函数

this.updateInfo（）

。在我的代码中，图标颜色取决于状态，并根据电话号码是否有效而变化。但是，当状态更改时，屏幕将重新渲染，键盘将关闭，因为文本字段将失去焦点。有没有其他方法可以更改图标的颜色？或者有没有一种方法可以让我把注意力集中在文本字段上

我指的是：

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet，TouchableOpacity，TextInput，Keyboard}；
从“react native elements”导入{Icon}；
从“react native sticky keyboard附件”导入键盘附件；
从“react native phone input”导入PhoneInput；
导出默认类PhoneLogin扩展组件{
构造函数（）{
超级（）；
此.state={
有效：“，
类型：“，
值：“”，
iconColor:#D3“，
};
this.updateInfo=this.updateInfo.bind（this）；
}
更新信息（）{
这是我的国家({
有效：this.phone.isValidNumber（），
类型：this.phone.getNumberType（），
值：this.phone.getValue（）.replace（/[-）（]/g'，），
});
}
render（）{
返回(
{
this.phone=ref；
}}
样式={{高度：50，边框颜色：'#44c0b9'，边框底部宽度：2}}
onChangePhoneNumber={（电话）=>{this.updateInfo（）}}
/>
);
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“中心”，
填充：20，
加油站：60
},
信息：{
//宽度：200，
边界半径：5，
背景色：“f0”，
填充：10，
玛金托普：20
},
按钮：{
玛金托普：20，
填充：10
}
});

在按下图标时，需要发送箭头功能

图标应该是这样的

<Icon 
    raised
    reverse
    color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"
    name='arrow-right'
    type='font-awesome'
    onPress={() => Keyboard.dismiss()}
/>

Keyboard.disclose（）}
/>

问题是键盘。每次重新渲染组件时，dismise（）都会立即运行，从而关闭键盘

---

希望这有帮助

哦，天哪！！！我已经坚持了好几天了，我没有意识到这与

onChangePhonenumber（）

无关。非常感谢你，你不知道我有多傻！

<Icon 
    raised
    reverse
    color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"
    name='arrow-right'
    type='font-awesome'
    onPress={() => Keyboard.dismiss()}
/>