按下Enter键后执行某个操作-React Native

Question

我使用react原生电话输入包输入电话号码。我希望在用户输入电话号码后按下键盘上的回车键时打开下面的密码字段。程序包中没有这样的方法。我该怎么做？当键盘打开时，我可以只听回车键并将其设置为密码输入吗？

import { TextInput, View } from 'react-native';
import React, { useState } from 'react';
import PhoneInput from 'react-native-phone-input';
export default function SignUp({ navigation }) {
const [password, setPassword] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
return (
<View >
<PhoneInput
ref={ref => { phone = ref }}
onChangePhoneNumber={setPhoneNumber}
style={{ width: 150, height: 30, backgroundColor: 'grey' }}
/>
<TextInput
onChangeText={setPassword}
value={password}
style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }}
/>
</View >
);
}

Answer 1

react本机电话输入中有一个prop，它应该允许您像处理普通TextInput一样处理此问题。

onPressConfirm
func none
点击确认按钮时调用的处理程序

因此，您可以定义一个状态，并使用onPressConfirm函数道具来更改此状态。然后使用条件呈现来隐藏或显示password输入。

import { TextInput, View } from 'react-native';
import React, { useState } from 'react';
import PhoneInput from 'react-native-phone-input';
export default function SignUp({ navigation }) {
const [password, setPassword] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [confirm, setConfirm] = useState(false)
return (
<View >
<PhoneInput
ref={ref => { phone = ref }}
onChangePhoneNumber={setPhoneNumber}
style={{ width: 150, height: 30, backgroundColor: 'grey' }}
onPressConfirm={() => setConfirm(true)}
/>
{ confirm &&
<TextInput
onChangeText={setPassword}
value={password}
style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }}
/>}
</View >
);
}