인프런 커뮤니티 질문&답변
작성한 질문수
키보드 숫자 키패드의 Enter 기능이 작동하지 않는 문제
작성
·
405
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 키가 작동하지 않는 문제를 해결하려면 몇 가지를 확인해보셔야 합니다.
먼저, TextInput의 keyboardType 프로퍼티를 확인해주세요. 숫자 키패드를 사용하려면 keyboardType을 “numeric”으로 설정해야 합니다.
<TextInput
...
keyboardType="numeric"
...
/>
그리고 안드로이드에서는 returnKeyType 프로퍼티를 “done”으로 설정해주면 버튼 역할을 하는 Enter 키를 활성화할 수 있습니다.
<TextInput
...
returnKeyType="done"
...
/>
이렇게 프로퍼티를 설정하면 안드로이드의 숫자 키패드에서도 Enter 키를 통해 handleSubmit 함수가 정상적으로 호출되어야 합니다. 꼭 위 두 설정이 적용된 상태에서 테스트해보시길 바랍니다.