React Native onBlur在文本输入中不起作用

ruyhziif  于 2023-01-14  发布在  React
关注(0)|答案(2)|浏览(272)

我试图检测当用户点击输入外,但感觉它只与onFocus工作,但它onBlur不做任何事情,这里是简单的代码

/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {
  TouchableWithoutFeedback,
  TextInput,
  View,
  SafeAreaView,
} from 'react-native';

const TextInputTest = () => {
  const [isBorder, setBorder] = useState(false);
  return (
    <SafeAreaView
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View style={{borderWidth: isBorder ? 1 : 0}}>
        <TextInput
          placeholder="sometext"
          onFocus={() => setBorder(!isBorder)}
          onBlur={() => setBorder(!isBorder)}
        />
      </View>
    </SafeAreaView>
  );
};
export default TextInputTest;

我只能看到边界变黑,它再也不会空白了,发生了什么事,请帮助,非常感谢

of1yzvn4

of1yzvn41#

onBlur事件将在你聚焦于你的TextInput时触发。在这种情况下,你只有一个TextInput,你不能聚焦于其他地方作为一个动作。尝试使用2个TextInput,或者定义一些动作,如按钮,然后当你点击另一个TextInput或按钮时,onBlur将被调用。

rjjhvcjd

rjjhvcjd2#

您可以尝试将<TextInput /> Package 在<TouchableWithoutFeedback />元素中,并为该<TouchableWithoutFeedback />添加onPress处理程序
下面以a snack为例

相关问题