inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

Todo 리스트 나열하기

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

732

이수진

작성한 질문수 2

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 함수가 실행되도록 하려면 어떻게 코드를 작성해야 하나요?

react react-native expo

답변 1

0

인프런 AI 인턴

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

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

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

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

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

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

21강 11분 59초 버그

1

48

0

svg질문

0

61

1

강의 자료 다운

0

95

1

expo가 안깔리고 에러가 납니다.

0

201

3

React-Native 강의중 expo 모바일이랑 연결 중에 이런 오류가 나네요

0

209

1

getStatusBarHeight () 화면UI적용

0

123

1

navigation쓸때 오류

0

161

1

수업외로 궁금한거 2

0

82

1

수업 외로 궁금한거!

0

87

1

파이어베이스 버전 11 오류

0

96

1

마지막 9번째 Redux 관련 자료가 없어요

0

77

1

오류 잡기

0

115

0

강의에서 InputForm.js에서

0

114

2

React-Native-Cli 컴파일 오류

0

197

2

윈도우에서 cli 이용해서 ios개발이 가능한가요?

0

690

2

android studio에서 시뮬레이터를 실행시 cpu 과도 사용 질문

0

239

1

Execution failed for task ':app:checkDebugDuplicateClasses'. 에러 해결

0

323

1

선생님 이다음 remote push 부분 강의가 없습니다.

0

191

2

Check the render method of `SceneView`. 오류

0

347

3

진도가 100% 완료가 안됩니다.

0

213

1

진행도가 100% 안찍혀요

0

222

1

프로젝트 예제 코드는 깃헙에서 따로 볼 수 있을까요?

0

141

1

expo 환경설정 관련해서 문의드립니다.

0

423

1

'NavigationContainer' 중첩 오류

0

407

1