Question

我在5页中有40个TextInput，需要更改输入文本的颜色onfocus：'white'和onBlur：'gray' 我知道如何让它一次输入。但是我需要多次输入

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

/>

Answer 1

您可以简单地为每个输入提供一个ID，然后使用该ID来知道哪个ID是重点：

if ( glob($pathToFolder . "/" . $filename . ".jpg") {
   return $jpgFile;
} else if( glob($pathToFolder . "/" . $filename . ".png") {
   return $pngFile;
} else if( glob($pathToFolder . "/" . $filename . ".gif") {
   return $gifFile;
} else {
return $default; }

在<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()

这只是出于重点目的。如果代码保持这样，则所有输入将具有相同的值

Answer 2

在组件中设置文本输入及其样式。然后在组件中使用state来控制您的样式。

const [focus, setFocus] = useState(false);

<TextInput
    style={focus ? styles.inputOnFocus : styles.inputOnBlur}
    onFocus={() => setFocus(true)}
    onBlur={() => setFocus(false)}
/>

样式：

const styles = StyleSheet.create({
    inputOnFocus: { borderColor: '#C0C0C0' },
    inputOnBlur: { borderColor: '#4b6cd5' }
});

当TextInput onFocus和onBlur.React-Native时更改样式

2 个答案: