[英]Failed prop type: Invalid prop 'value' of type 'object' supplied to 'TextInput'
[英]Failed prop type: Invalid prop `defaultValue` of type `object`
海。 我是本机反应的新手,但我正面临这个问题。
我使用 TextInput 设计了 OTP 屏幕,但出现了这个错误,我不知道为什么,失败的 prop type invalid prop 'defaultValue' of type 'object' 提供给 'textinput' expected 'string' 。 我使用 state 钩子和 useref 钩子来创建这个屏幕。
这是屏幕的完整代码:
//import files
const EmailOTP = ({ navigation }) => {
const [otpState, setOtpState] = useState({
pin1: '',
pin2: '',
pin3: '',
pin4: '',
pin5: '',
pin6: '',
})
otpState.pin1 = useRef('');
otpState.pin2 = useRef('');
otpState.pin3 = useRef('');
otpState.pin4 = useRef('');
otpState.pin5 = useRef('');
otpState.pin6 = useRef('');
useEffect(() => {
otpState.pin1.current.focus();
}, [])
return (
<View style={styles.container} >
<ScrollView
contentInsetAdjustmentBehavior="automatic"
showsVerticalScrollIndicator={false}
>
<View style={styles.OTPWrapper} >
<TextInput
ref={otpState.pin1}
onChangeText={pin1 => {
setOtpState({ pin1: pin1 })
if (otpState.pin1 != "") {
otpState.pin2.current.focus();
}
}
}
defaultValue={otpState.pin1}
maxLength={1}
style={styles.OTPinput}
/>
<TextInput
ref={otpState.pin2}
onChangeText={pin2 => {
setOtpState({ pin2: pin2 })
if (otpState.pin2 != "") {
otpState.pin3.current.focus();
}
}
}
defaultValue={otpState.pin2}
maxLength={1}
style={styles.OTPinput}
/>
<TextInput
ref={otpState.pin3}
onChangeText={pin3 => {
setOtpState({ pin3: pin3 })
if (otpState.pin3 != "") {
otpState.pin4.current.focus();
}
}
}
defaultValue={otpState.pin3}
maxLength={1}
style={styles.OTPinput}
/>
<TextInput
ref={otpState.pin4}
onChangeText={pin4 => {
setOtpState({ pin4: pin4 })
if (otpState.pin4 != "") {
otpState.pin5.current.focus();
}
}
}
defaultValue={otpState.pin4}
maxLength={1}
style={styles.OTPinput}
/>
<TextInput
ref={otpState.pin5}
onChangeText={pin5 => {
setOtpState({ pin5: pin5 })
if (otpState.pin5 != "") {
otpState.pin6.current.focus();
}
}
}
defaultValue={otpState.pin5}
maxLength={1}
style={styles.OTPinput}
/>
<TextInput
ref={otpState.pin6}
onChangeText={pin6 => {
setOtpState({ pin6: pin6 })
}
}
defaultValue={otpState.pin6}
maxLength={1}
style={styles.OTPinput}
/>
</View>
<TouchableOpacity onPress={()=>navigation.navigate('PhoneNumberVerification')}>
<View style={[styles.btnWrapper, { marginTop: 40, }]} >
<Text style={styles.logButton} >Verify Email</Text>
</View>
</TouchableOpacity>
<View style={styles.contentWrapperOtpResend} >
<View style={styles.loginRedirectWrapper}>
<Text style={styles.loginRedirectText} >Didn't Receive the code?</Text>
<Text style={styles.loginRedirectButton}> Resend</Text>
</View>
</View>
</ScrollView>
</View>
);
}
export default EmailOTP
在我看来,您实际上只是链接了引脚但尚未设置它们。 试试这个:
otpState.pin1 = useRef(null);
otpState.pin2 = useRef(null);
otpState.pin3 = useRef(null);
otpState.pin4 = useRef(null);
otpState.pin5 = useRef(null);
otpState.pin6 = useRef(null);
otpState.pin1.current = '';
otpState.pin2.current = '';
otpState.pin3.current = '';
otpState.pin4.current = '';
otpState.pin5.current = '';
otpState.pin6.current = '';
并将每个TextInput的 defaultValue 设置为它们各自的引脚,如下所示: 'otpState.pin1.current'
这就是TextInput的样子:
<TextInput
ref={otpState.pin1}
onChangeText={pin1 => {
setOtpState({pin1: pin1});
if (otpState.pin1 != '') {
otpState.pin2.current.focus();
}
}}
defaultValue={otpState.pin1.current}
maxLength={1}
style={styles.OTPinput}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.