[英]How focus the next field input in react native?
I need focus the next field input in react native, in android platform.我需要在 android 平台的 react native 中关注下一个字段输入。 But the focus() function, not exists in android react native, only in IOS.
但是 focus() 函数,在 android react native 中不存在,只在 IOS 中存在。
How make this ?这个怎么弄? I use react native with typescript.
我使用带有打字稿的本机反应。
The focus function works just fine.焦点功能工作得很好。
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Name: </Text>
<TextInput ref="name" onChangeText={(name) => this.setState({name})} style={{flex: 1}}
onSubmitEditing={() => this.refs.age.focus()}/>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Age: </Text>
<TextInput ref="age" keyboardType="numeric" onChangeText={(age) => this.setState({age})} style={{flex: 1}}
onSubmitEditing={() => this.refs.sport.focus()}/>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{flex: 1}}>Enter Favourite Sport: </Text>
<TextInput ref="sport" onChangeText={(sport) => this.setState({sport})} style={{flex: 1}}/>
</View>
Hope this helps.希望这可以帮助。 This is for android.
这是针对安卓的。
You have to user ref on Inputs where you want to focus on:您必须在要关注的输入上使用 ref :
<Input
ref={(node) => { this.myInput = node }}
value={this.state.myInput.toString()}
onSubmitEditing={() => { this.myOtherInput.focus() }}/>
<Input
ref={(node) => { this.myOtherInput = node }}
value={this.state.myOtherInput.toString()}/>
You can see that when you submit the editing on the first input you will focus on the second one.您可以看到,当您提交对第一个输入的编辑时,您将专注于第二个输入。 you can use this.MY_CUSTOM_REF.focus() wherever you want.
你可以在任何你想要的地方使用 this.MY_CUSTOM_REF.focus() 。
This work for me:这对我有用:
<Input
blurOnSubmit={false}
returnKeyType="next"
onSubmitEditing={() => {
this.passwordInput.wrappedInstance.focus();
}}
/>
<Input
secureTextEntry
ref={(input) => {
this.passwordInput = input;
}}
/>
I insert the function in my customize component.我将函数插入到我的自定义组件中。
public focus(){
this.input.focus()
}
Have a look at this article, this might be handy react-native inputs看看这篇文章,这可能是方便的本机输入
//Helper function
focusNextField(nextField) {
this.refs[nextField].focus();
}
<TextInput
ref='1'
style={styles.otpInputStyle}
keyboardType='numeric'
secureTextEntry
value={this.props.otp1}
maxLength={1}
onChangeText={(num) => {
this.props.otpCode1(num); //action call
if (num && num.length === 1) {
this.focusNextField('2'); //function call. '2' ref to next input ref
}
}}
/>
import React, { useRef } from 'react';
...
export default function YourFuctionalComponent() {
const input1 = useRef(null);
const imput2 = useRef(null);
const doSomething = () => {}
return(
<>
<TextInput
autoFocus
ref={input1}
onSubmitEditing={() => { imput2.current.focus(); }}
returnKeyType="next"
/>
<TextInput
ref={input2}
onSubmitEditing={() => doSomething()}
returnKeyType="done"
/>
</>
);
}
https://i.stack.imgur.com/W6dvs.gif https://i.stack.imgur.com/W6dvs.gif
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.