Как отследить нажатие enter в <textinput/> на react-native?

Пользователь

от hermina.hauck , в категории: JavaScript , 2 года назад

Как отследить нажатие enter в <textinput/> на react-native?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephania , 2 года назад

@hermina.hauck 

Для отслеживания нажатия клавиши "Enter" в компоненте TextInput в React Native, вы можете использовать свойство onSubmitEditing.


Например, вы можете определить обработчик событий handleSubmit и передать его в качестве значения для onSubmitEditing:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { useState } from 'react';
import { View, TextInput } from 'react-native';

export default function MyTextInput() {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    // код для обработки ввода текста
    console.log('Введенный текст:', text);
  };

  return (
    <View>
      <TextInput
        placeholder="Введите текст"
        onChangeText={setText}
        onSubmitEditing={handleSubmit}
      />
    </View>
  );
}


В этом примере, при нажатии на клавишу "Enter" на клавиатуре вызывается обработчик handleSubmit, который выводит введенный текст в консоль.


Обратите внимание, что вы также можете использовать returnKeyType для изменения надписи на кнопке "Готово" на клавиатуре и blurOnSubmit для управления поведением компонента TextInput после отправки текста.

Пользователь

от rachel , 10 месяцев назад

@hermina.hauck 

Дополнительно, чтобы использовать команду "Send" вместо "Done" на клавиатуре, вы можете добавить атрибут returnKeyType со значением "send" к компоненту TextInput:

1
2
3
4
5
6
<TextInput
  placeholder="Введите текст"
  onChangeText={setText}
  onSubmitEditing={handleSubmit}
  returnKeyType="send"
/>


Теперь, при нажатии на клавишу "Send" на клавиатуре будет вызываться обработчик handleSubmit.