React native 在带有多个输入的react native中处理焦点

我希望在启动onFocus时，仅在其中一个输入上切换焦点状态，而不是在两个输入上切换焦点状态

由于这两个输入都有“onFocus”和“onBlur”事件，我希望状态只在当前聚焦的元素上更新

对于这种事件处理，我应该使用refs而不是state吗

class SignInScreen extends Component {

state = {
  isFocused: false,
  style: {
    inputContainer: styles.input
  }
}

onFocus = () => {

    if(!this.state.isFocused) {
      this.setState({
        isFocused: true,
        style: {
          inputContainer: styles.inputDifferent
        }
      })
    }
  }
  onBlur = () => {
    if(this.state.isFocused) {
      this.setState({
        isFocused: false,
        style: {
          inputContainer: styles.input
        }
      })
    }
}
render() {
    return (
      <Input
            containerStyle={[styles.input, this.state.style.inputContainer]}      
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
          <Input
            containerStyle={[styles.input, this.state.style.inputContainer]}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
    )
  }
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: 'white,
    marginBottom: 16,
    maxWidth: '90%',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  inputDifferent: {
    backgroundColor: 'gray',
  }  
});

类标志屏幕扩展组件{
状态={
isFocused:错，
风格：{
inputContainer:styles.input
}
}
onFocus=（）=>{
如果（！this.state.isFocused）{
这是我的国家({
是的，
风格：{
inputContainer:styles.inputDifferent
}
})
}
}
onBlur=（）=>{
if（this.state.isFocused）{
这是我的国家({
isFocused:错，
风格：{
inputContainer:styles.input
}
})
}
}
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
输入：{
边框宽度：1，
边框颜色：“白色，
marginBottom:16，
maxWidth:'90%'，
marginLeft:'自动'，
marginRight:“自动”
},
输入不同：{
背景颜色：“灰色”，
}  
});

如下修改代码：

编辑：

    class SignInScreen extends Component {

  state = {
    isFocused: false,
    firstLoad: true

  }   

  onFocus = () => {
        this.setState({
          isFocused: !this.state.isFocused,
          firstLoad: false
        })
    }

  render() {
    const {isFocused} = this.state
      return (
        <View>
        <Input
              containerStyle={isFocused || firstLoad ? styles.input : styles.inputDifferent}      
              onFocus={this.onFocus}
            />
            <Input
              containerStyle={!isFocused  || firstLoad ? styles.input : styles.inputDifferent}
              onFocus={this.onFocus}
            />
         </View>
      )
    }
  }

  const styles = StyleSheet.create({
    input: {
      borderWidth: 1,
      borderColor: 'white',
      marginBottom: 16,
      maxWidth: '90%',
      marginLeft: 'auto',
      marginRight: 'auto'
    },
    inputDifferent: {
      backgroundColor: 'gray',
    }  
  });

类标志屏幕扩展组件{
状态={
isFocused:错，
firstLoad：对
}   
onFocus=（）=>{
这是我的国家({
isFocused:！this.state.isFocused，
第一次加载：false
})
}
render（）{
const{isFocused}=this.state
返回(
)
}
}
const styles=StyleSheet.create({
输入：{
边框宽度：1，
边框颜色：“白色”，
marginBottom:16，
maxWidth:'90%'，
marginLeft:'自动'，
marginRight:“自动”
},
输入不同：{
背景颜色：“灰色”，
}  
});

没有必要在状态中包含样式。最好只使用this.state.isFocus使代码更简单。只是用它来设定输入将使用什么样式的条件

您也可以忽略onBlur。因为我们所需要的只是专注

这里的关键因素是使状态切换的感叹号

已编辑：添加firstLoad状态，以使加载时两个输入的样式相同。将在输入样式内部的条件中使用

---

注意：它只能使用两个输入

修改代码如下：

编辑：

    class SignInScreen extends Component {

  state = {
    isFocused: false,
    firstLoad: true

  }   

  onFocus = () => {
        this.setState({
          isFocused: !this.state.isFocused,
          firstLoad: false
        })
    }

  render() {
    const {isFocused} = this.state
      return (
        <View>
        <Input
              containerStyle={isFocused || firstLoad ? styles.input : styles.inputDifferent}      
              onFocus={this.onFocus}
            />
            <Input
              containerStyle={!isFocused  || firstLoad ? styles.input : styles.inputDifferent}
              onFocus={this.onFocus}
            />
         </View>
      )
    }
  }

  const styles = StyleSheet.create({
    input: {
      borderWidth: 1,
      borderColor: 'white',
      marginBottom: 16,
      maxWidth: '90%',
      marginLeft: 'auto',
      marginRight: 'auto'
    },
    inputDifferent: {
      backgroundColor: 'gray',
    }  
  });

类标志屏幕扩展组件{
状态={
isFocused:错，
firstLoad：对
}   
onFocus=（）=>{
这是我的国家({
isFocused:！this.state.isFocused，
第一次加载：false
})
}
render（）{
const{isFocused}=this.state
返回(
)
}
}
const styles=StyleSheet.create({
输入：{
边框宽度：1，
边框颜色：“白色”，
marginBottom:16，
maxWidth:'90%'，
marginLeft:'自动'，
marginRight:“自动”
},
输入不同：{
背景颜色：“灰色”，
}  
});

没有必要在状态中包含样式。最好只使用this.state.isFocus使代码更简单。只是用它来设定输入将使用什么样式的条件

您也可以忽略onBlur。因为我们所需要的只是专注

这里的关键因素是使状态切换的感叹号

已编辑：添加firstLoad状态，以使加载时两个输入的样式相同。将在输入样式内部的条件中使用

---

注意：它只能与两个输入一起工作

感谢您的建议，尽管在我实施此功能时，聚焦于第一个输入字段也会聚焦于第二个输入字段，反之亦然。此外，当导航离开输入字段时，它仍然保持聚焦样式，这就是为什么我认为还需要onBlur事件的原因。在聚焦于第二个输入字段之后，您是否已经添加感叹号。？我的正在工作。是的，你是对的，它正在工作！就像你说的，没看到集装箱式道具上的感叹号。这确实意味着当屏幕加载时，第一个输入字段被聚焦，这是我希望避免的。那么您希望加载的是两个输入都不聚焦吗？。这意味着他们的风格在加载时是一样的？谢谢你的建议，尽管当我实现这一点时，聚焦于第一个输入字段也会聚焦于第二个输入字段，反之亦然。此外，当导航离开输入字段时，它仍然保持聚焦样式，这就是为什么我认为还需要onBlur事件的原因。在聚焦于第二个输入字段之后，您是否已经添加感叹号。？我的正在工作。是的，你是对的，它正在工作！就像你说的，没看到集装箱式道具上的感叹号。这确实意味着当屏幕加载时，第一个输入字段被聚焦，这是我希望避免的。那么您希望加载的是两个输入都不聚焦吗？。意味着他们的风格是一样的，当加载？