Блог

Главная - Вопросы по программированию - Реагирующий — встроенный текстовый ввод onFocus не работает

Реагирующий — встроенный текстовый ввод onFocus не работает

#react-native

#react-родной

Вопрос:

Я пытаюсь создать стиль onFocus для TextInput, но независимо от того, что я пытаюсь, это не работает,

Вот мой текущий код

 
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, но это тоже не сработало

Какие-либо предложения, пожалуйста?

Комментарии:

1. Как вы думаете, {…props} переопределяет вашу функцию?

2. Я пытался удалить его, но все еще не работает

3. Я не думаю, что ваш код неправильный. Это выглядит хорошо

4. попробуйте log focused, чтобы проверить

5. Я перезапустил приложение, и вы были правы, реквизиты закончили писать мою функцию, но теперь у меня проблема с передачей реквизитов

Ответ №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;

Комментарии:

1. Похоже, это не работает. onBlur событие не вызывается, когда вы касаетесь вне поля ввода, за исключением другого вводимого текста или областей, к которым можно прикоснуться.