当 TextInput onFocus 和 onBlur.React-Native 时更改样式 [英] Change style when TextInput onFocus and onBlur.React-Native
本文介绍了当 TextInput onFocus 和 onBlur.React-Native 时更改样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 5 页中有 40 个 TextInput,需要更改输入文本颜色 onfocus:'white' 和 onBlur:'gray'我知道如何进行单输入.但我需要多输入
I have 40 TextInput in 5 page and need to change input text color onfocus:'white' and onBlur:'gray' I know how make it for single input.But I need for multiple input
<TextInput
clearTextOnFocus={true}
keyboardType="number-pad"
style={[this.state.isFocused?styles.inputOnFocus:styles.input]}
onChangeText={v=>handleInput('value',v)}
value={this.state.value}
onFocus={()=>this.setState({isFocused:true})}
onBlur={()=>this.setState({isFocused:false})}
/>
推荐答案
您可以简单地为每个 Inputs 指定一个 ID,并使用该 ID 来知道哪个 ID 被关注:
You can simply give each one of the Inputs an ID and use that one to know which ID is focused:
<TextInput
clearTextOnFocus={true}
keyboardType="number-pad"
style={[this.state.FocusedItem === "TextInput1"? styles.inputOnFocus : styles.input]}
onChangeText={v=>handleInput('value',v)}
value={this.state.value}
onFocus={()=>this.setState({FocusedItem: "TextInput1"})}
onBlur={()=>this.setState({FocusedItem: ""})}
/>
在 .map()
函数中,它可能是这样的:
In a .map()
function it could be like:
arr.map( (item, index) => {
let ID = "TextInput"+index
return (
<TextInput
clearTextOnFocus={true}
keyboardType="number-pad"
style={[this.state.FocusedItem === ID? styles.inputOnFocus : styles.input]}
onChangeText={v=>handleInput('value',v)}
value={this.state.value}
onFocus={()=>this.setState({FocusedItem: ID})}
onBlur={()=>this.setState({FocusedItem: ""})}
/>
)
})
这只是为了集中注意力.如果代码保持这样,所有输入将具有相同的值
This is just for focus purpose. If the code stays like this, all inputs will have the same value
这篇关于当 TextInput onFocus 和 onBlur.React-Native 时更改样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文