Метод clear
Метод clear компонента
TextInput
вызывают у ref: fieldRef.current.clear().
Строка в поле стирается на устройстве.
Состояние value в React нужно обновить отдельно, если поле управляемое.
Синтаксис
fieldRef.current.clear();
Параметры
| Параметр | Описание |
|---|---|
| - | Аргументы не передают. |
Пример
Давайте очистим поле кнопкой и сбросим состояние:
import { useRef, useState } from 'react';
import { View, TextInput, Button } from 'react-native';
export default function App() {
const fieldRef = useRef(null);
const [text, setText] = useState('abcde');
const onClear = () => {
fieldRef.current.clear();
setText('');
};
return (
<View>
<TextInput
ref={fieldRef}
value={text}
onChangeText={setText}
/>
<Button title="12345" onPress={onClear} />
</View>
);
}
На экране поле с текстом и кнопка. После нажатия кнопки поле пустое и в состоянии тоже пустая строка.
Пример
Давайте вызовем clear без сброса состояния и увидим рассинхрон:
import { useRef, useState } from 'react';
import { View, TextInput, Button } from 'react-native';
export default function App() {
const fieldRef = useRef(null);
const [text, setText] = useState('12345');
return (
<View>
<TextInput
ref={fieldRef}
value={text}
onChangeText={setText}
/>
<Button
title="abcde"
onPress={() => fieldRef.current.clear()}
/>
</View>
);
}
На экране после clear поле может снова показать старую строку из value.
Поэтому в управляемом поле очищают и ref, и состояние.
