Компонент метки не удаляется с помощью BackSpace - React Native

Question

У меня есть приложение React Native. У меня есть TextInput, в котором есть фильтр / поиск logi c и простой FlatList. Щелкните внутри TextInput, появится раскрывающееся меню фильтров. Я выбираю один фильтр, и он отображается как метка внутри моего TextInput. Тогда я могу искать любой текст.

TextInput с параметрами фильтра:

Выберите фильтр «rehab»:

Текст поиска «test» в отфильтрованных сообщениях:

Теперь моя проблема заключается в том, когда я нажмите BACKSPACE, текст "test" будет удален, а метка - нет. Потому что для этой метки я создал отдельный компонент (Label. js). В этом компоненте я только что добавил стиль.

Код:

import Label from './Label.js';
  <Icon type='materialicons' name='search'  />.  //search icon
  { val === "" ? null :
  <Label val={this.state.val}> {val} </Label>.  //Label component I created
  }
  <TextInput                                  //TextInput
    value={value} 
    placeholder='Search Here...'
    onChangeText={(text)=>{this.handleSearch(text, true))}}  
    style={{ height: 40, flex: 1}}
    autoCapitalize='none'
    selectTextOnFocus={true}
  />
  <Icon type='materialicons' name='cancel' onPress={()=> {this.handleFilterIcon(false)}} />         // clear text icon

Значит, значок CLEAR выше очистит метку. Работает нормально. Но если пользователь хочет просто удалить эту метку с помощью «BackSpace», это создаст проблему. Можно ли удалить компонент Label с помощью клавиши BackSpace ??? Является ли это возможным??

Обновленный выпуск: В соответствии с ответом ниже я изменил свой код. Столкнулся с другой проблемой. Фильтр хранится в состоянии "val". Введенная текстовая строка сохраняется в состоянии «значение». Использование 2 условий: 1) если и val, и значение не являются начальными, тогда инициализируйте только «значение» 2) если только val не является начальным, затем очистите «val» Как мне объединить оба вместе ???? По сути, все должно быть удалено с помощью клавиши "Backspace".

this.handleClearText(){
setState({
 value: ""
})
}

this.handleClearFilter(){
setState({
 val: ""
})
}

<TextInput
onKeyPress={({ nativeEvent }) => {
                      if (nativeEvent.key === 'Backspace' && val !== "" && value !== "") {
                        this.handleClearText();
                      } 
                      if (nativeEvent.key === 'Backspace' && val !== "") {
                        this.handleClearFilter();
                      } 
/>

Answer 1

Вы можете удалить метку, если текст пуст, и если пользователь нажимает backspace в пустом тексте,

    <TextInput
      onKeyPress={({ nativeEvent }) => {
        if (nativeEvent.key === 'Backspace' && value==='') {
     //set label state value as empty
        }
      }}
    />

И внутри метки вы можете обрабатывать отображение пустых значений. Вы также можете добавить условия, например, чтобы значение метки не было пустым.

Обновление для отредактированного вопроса

Вы можете использовать подобный настраиваемый компонент, здесь ввод создаст что-то похожее на тег, а обратное пространство сохранится удаляя текст, и когда текст пуст, он удаляет метку.

const CustomInput = () => {
  const [text, setText] = React.useState('');
  const [val, setVal] = React.useState('');

  return (
    <View style={{ flexDirection: 'row' }}>
      <Text
        style={{
          backgroundColor: 'aqua',
          alignSelf: 'flex-start',
          marginHorizontal: 10,
        }}>
        {val}
      </Text>
      <TextInput
        placeholder="text"
        value={text}
        onChangeText={(t) => setText(t)}
        onKeyPress={({ nativeEvent }) => {
          if (nativeEvent.key === 'Backspace' && text === '') {
            setVal('');
          }
          if (nativeEvent.key === 'Enter' && text !== '') {
            setVal(text);
            setText('');
          }
        }}
      />
    </View>
  );
};