如何将焦点放在下一个点击反应本机?
问题描述:
嗨,我想重点下一个输入字段(这是从父母扩展),而下一个(在Android键盘)被点击android键盘关闭,而不是聚焦下一个领域。如何将焦点放在下一个点击反应本机?
我尝试了一些像onSubmitEditing= this.refs.passwordFeald.focus()
它不工作的代码,我感到如果有一个人解释这也是命名组件有点糊涂更好
下面是我当前的代码
export default class InputBox extends Component {
focusNextField = (nextField) => { this.refs[nextField].focus(); };
render(){
return(
<TextInput
style = {style.input}
underlineColorAndroid='rgba(255,255,255,0.7)'
placeholderTextColor = "rgba(255,255,255,0.6)"
placeholder = {this.props.placeholder}
secureTextEntry={this.props.typePassword}
returnKeyType = {this.props.returnKeyType}
ref = {this.props.inputRef}
focusNextField = {() => this.focusNextField(this.props.onSubmitEditing)}
/>
)
}
}
export default class Login extends Component {
render(){
return(
<View style={[styles.container, commonStyle.background]}>
<View style={[headerContStyle.topContainer]}>
<MainHeading/>
</View>
<View style={[formStyle.container]}>
<InputBox
placeholder = "Email or username"
returnKeyType = "next"
inputRef = {el => this.usenameFeald = el}
onSubmitEditing= 'passwordFeald'
/>
<InputBox
placeholder = "Password"
secureTextEntery = {"true"}
returnKeyType = "go"
inputRef = {el => this.passwordFeald = el}
typePassword = {true}
/>
<CommonButton
title = "Login"
/>
<CommonButton
title = "Sign Up"
/>
<ForgotPassword />
</View>
</View>
)
}
}
答
参考的关于TextInput
here的文件。
您可以看到示例集中在类BlurOnSubmitExample
上的下一个TextInput
。 在你的项目中,我建议你更改属性这样在第一个输入:
<InputBox
placeholder="Email or username"
returnKeyType="next"
onSubmitEditing={() => this.nextInput.focus()}
/>
,第二个:
<InputBox
placeholder="Password"
returnKeyType="next"
inputRef={(nextInput) => this.nextInput = nextInput}
/>
在的InputBox组件,我们送ref
到父组件:
ref={(nextInput) => {this.props.inputRef && this.props.inputRef(nextInput)}}
{ ...this.props }
onSubmitEditing
会在用户按回车键时调用,这样会集中第二个TextInput
。
ThanksNguyênHoàngit works –