[React Native] DelayInput(react-native-debounce-input) 에서 value 값 전체 삭제하기

[React Native] DelayInput(react-native-debounce-input) 에서 value 값 전체 삭제하기

 

지연된 입력을 렌더링 하는 DelayInput 을 사용하면서 value 값을 전체삭제 하는 버튼을 만들려고 했다. react-native 에 있는 TextInput 과 같이 setValue("") 를 해줬더니 value 값은 공백이 되지만 input 창 안에 있는 텍스트들은 안 없어진다!

 

 

 

 

input 창 안에 있는 값들도 초기화해주기 위해서는 inputRef.current.clear() 활동이 추가적으로 필요하다. 추가해주면 다음과 같이 초기화가 아주 잘 된다!

 

 

 

 

예시코드

import React, {useState, createRef} from 'react';
import DelayInput from 'react-native-debounce-input';
import {StyleSheet, View, Button, Text} from 'react-native';

export default () => {
  const inputRef = createRef();

  const [value, setValue] = useState('');

  const allClear = () => {
    setValue('');
    inputRef.current.clear();
  };

  return (
    <View style={styles.container}>
      <DelayInput
        value={value}
        onChangeText={setValue}
        style={styles.input}
        placeholder="이름을 입력해주세요."
        multiline={true}
        inputRef={inputRef}
      />
      <Button onPress={allClear} title="전체삭제" />
      <Text>{value}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: 250,
    height: 100,
    borderColor: '#999',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    textAlignVertical: 'top',
  },
});