React-native textInput onFocus 不起作用答案

【问题标题】：React-native textInput onFocus is not workingReact-native textInput onFocus 不起作用
【发布时间】：2020-10-20 07:05:27
【问题描述】：

我正在尝试为 TextInput 制作 onFocus 样式，但无论我尝试什么都不起作用，

这是我当前的代码


import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
      {...props}
    />
  );
};

export default Input;

我也尝试将它包裹在 TouchableOpacity 周围并将 setFocused 函数传递给 onPress，但它也不起作用

有什么建议吗？

【问题讨论】：

你认为 {...props} 是否覆盖了你的功能？
我试图删除它但仍然无法正常工作
我认为您的代码没有错。看起来不错
尝试日志重点检查
我重新启动了应用程序，你是对的，道具已经写完了我的函数，但现在我在传递道具时遇到了问题

标签： react-native

【解决方案1】：

如果你的道具覆盖了 onFocus 函数，只需像这样把它放在头上

import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      {...props}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
    />
  );
};

export default Input;

【讨论】：

这似乎行不通。 onBlur 事件不会在您触摸输入框以外的地方时调用，除了另一个输入文本或可触摸区域。