每次重点关注时，在React Native上设置TextInput的样式

Question

每次输入时，我都需要为输入设置样式（使底部边框为蓝色）。

我每个人都有这个代码。

<Input
    pointerEvents="auto" 
    maxLength={1}
    editable={true}
    secureTextEntry
    style={!this.state.focus ? styles.blueBorder : styles.pinItem }
    onFocus={(e) => this.changeBorder(e, this)}
    name={0}
/>

changeBorder函数：

changeBorder (e, v)  {
    !this.state.focus ? this.setState({
            focus: true
        }) : this.setState({
            focus: false
    })
}

样式：

pinItem: {
    marginHorizontal: 8,
    borderWidth: 1,
    borderColor: "#E5E5EA",
    elevation: 3,
    fontSize: 24,
    textAlign: "center",
    height: 58,
    width: 58,
},
blueBorder: {
    marginHorizontal: 8,
    borderWidth: 1,
    borderColor: "#E5E5EA",
    elevation: 3,
    fontSize: 24,
    textAlign: "center",
    height: 58,
    width: 58,
    borderBottomColor: "#0093D7",
    borderBottomWidth: 4,
},

所以我的输入如下：

如您所见，每次将某些组件聚焦时，该代码都会为所有组件设置样式。为了分别设置样式，我尝试为每个输入使用某种ID，以便我可以设置状态对象并分别设置样式，但是我做不到。我还尝试使用某种CSS伪类（如focus）为每个样式使用css样式，但是它也没有用。

我在RN上还很新，所以我想不出更多解决此问题的方法。预先感谢您的回复。

PS：我正在使用基于本机的组件。

Answer 1

问题不在focus中。如果您没有意识到这一点，则每个文本输入都有保存指示器，它是this.state.focus。

解决方案

最简单的方法是创建将指示每个文本输入的多个状态。

希望获得帮助！

Answer 2

我处理此问题的方法是将当前关注的输入存储在状态中：

constructor(props) {
    super(props);

    this.state = {
        pinFocus: null,
    }
}

然后添加一种获取输入样式的方法：

pinInputStyles(focused = false){
    let styles = [baseStyles];
    if(focused === true){
        styles.push({borderColor: '#000'});
    }
    return styles;
}

然后在输入中执行样式，焦点和模糊这三件事（我已关闭其他属性）：

<Input
    style={this.pinInputStyles(this.state.pinFocus === 1)}
    onBlur={ () => this.setState({pinFocus:null}) }
    onFocus={ () => this.setState({pinFocus:1}) }
/>

然后将其他输入的1递增为2,3,4，以此类推。