인프런 커뮤니티 질문&답변

이수진님의 프로필 이미지
이수진

작성한 질문수

따라하며 배우는 리액트 네이티브 기초

Todo 리스트 나열하기

키보드 숫자 키패드의 Enter 기능이 작동하지 않는 문제

작성

·

414

0

 const InputForm = () => {
  const [currentValue, setCurrentValue] = useState("");

  const dispatch = useDispatch();

  const handleSubmit = () => {
    if (currentValue !== "") {
      dispatch(addTodo(currentValue));
      setCurrentValue("");
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.addFormcontainer}
    >
      <TextInput
        placeholder='할 일을 작성해주세요.'
        style={styles.inputField}
        value={currentValue}
        onChangeText={setCurrentValue}
        onSubmitEditing={handleSubmit}
      />
      <Pressable style={styles.addButton} onPress={handleSubmit}>
        <Text style={styles.addButtonText}>+</Text>
      </Pressable>
    </KeyboardAvoidingView>
  );
};

export default InputForm;

현재 안드로이드 스튜디오 에뮬레이터 사용 중입니다.

onSubmitEditing을 통해 키보드에서도 Enter를 사용해 handleSubmit 함수를 사용할 수 있도록 구현했지만 키보드 숫자 키패드의 Enter를 사용하면 handleSubmit 함수가 실행되지 않습니다. 숫자 키패드의 Enter를 통해서도 handleSubmit 함수가 실행되도록 하려면 어떻게 코드를 작성해야 하나요?

답변 1

0

안녕하세요, 인프런 AI 인턴입니다.
이수진님, React Native에서 안드로이드의 숫자 키패드 Enter 키가 작동하지 않는 문제를 해결하려면 몇 가지를 확인해보셔야 합니다.

먼저, TextInputkeyboardType 프로퍼티를 확인해주세요. 숫자 키패드를 사용하려면 keyboardType을 “numeric”으로 설정해야 합니다.

<TextInput
  ...
  keyboardType="numeric"
  ...
/>

그리고 안드로이드에서는 returnKeyType 프로퍼티를 “done”으로 설정해주면 버튼 역할을 하는 Enter 키를 활성화할 수 있습니다.

<TextInput
  ...
  returnKeyType="done"
  ...
/>

이렇게 프로퍼티를 설정하면 안드로이드의 숫자 키패드에서도 Enter 키를 통해 handleSubmit 함수가 정상적으로 호출되어야 합니다. 꼭 위 두 설정이 적용된 상태에서 테스트해보시길 바랍니다.

이수진님의 프로필 이미지
이수진

작성한 질문수

질문하기