更改 TextInput onFocus 和 onBlur.React-Native 时的样式答案

【问题标题】：Change style when TextInput onFocus and onBlur.React-Native更改 TextInput onFocus 和 onBlur.React-Native 时的样式
【发布时间】：2019-11-26 08:59:39
【问题描述】：

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

/>

【问题讨论】：

你能解释一下你想要什么行为以及当前代码发生了什么吗？当我读到这篇文章时，它应该可以正常工作！

标签： react-native textinput

【解决方案1】：

在组件中设置文本输入及其样式。然后在组件中使用 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' }
});

【讨论】：

这应该是公认的答案，它是干净且可重复使用的。干得好@Austin-Poulson

【解决方案2】：

您可以简单地为每个输入指定一个 ID，并使用该 ID 来了解关注哪个 ID：

<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() 函数中可能是这样的：

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: ""})}
       />
   ) 
})

这只是为了聚焦目的。如果代码保持这样，所有输入将具有相同的值

【讨论】：