我定义了两个TextInput字段如下:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
但在按下键盘上的“next”按钮后，我的react-native应用程序并没有跳转到第二个TextInput字段。我怎样才能做到呢?
谢谢!
当前回答
import React, { useState, useEffect, useRef, } from 'react';
const OTP = (props) => {
const OTP = [];
const ref_input = [];
ref_input[0] = useRef();
ref_input[1] = useRef();
ref_input[2] = useRef();
ref_input[3] = useRef();
const focusNext = (text, index) => {
if (index < ref_input.length - 1 && text) {
ref_input[index + 1].current.focus();
}
if (index == ref_input.length - 1) {
ref_input[index].current.blur();
}
OTP[index] = text;
}
const focusPrev = (key, index) => {
if (key === "Backspace" && index !== 0) {
ref_input[index - 1].current.focus();
}
}
return (
<SafeAreaView>
<View>
<ScrollView contentInsetAdjustmentBehavior="automatic" showsVerticalScrollIndicator={false}>
<View style={loginScreenStyle.titleWrap}>
<Title style={loginScreenStyle.titleHeading}>Verify OTP</Title>
<Subheading style={loginScreenStyle.subTitle}>Enter the 4 digit code sent to your mobile number</Subheading>
</View>
<View style={loginScreenStyle.inputContainer}>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
autoFocus={true}
returnKeyType="next"
ref={ref_input[0]}
onChangeText={text => focusNext(text, 0)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 0)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[1]}
onChangeText={text => focusNext(text, 1)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 1)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[2]}
onChangeText={text => focusNext(text, 2)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 2)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[3]}
onChangeText={text => focusNext(text, 3)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 3)}
/>
</View>
</ScrollView>
</View>
</SafeAreaView >
)
}
export default OTP;
其他回答
结合@Eli Johnson的功能组件解决方案和@Rodrigo Tessarollo的CustomTextInput解决方案:
import React, { useRef } from 'react';
import { CustomTextInput } from 'path/to/CustomTextInput';
...
export const MyFormComponent = () => {
const ref_to_input2 = useRef();
return (
<>
<CustomTextInput
placeholder="Input 1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_to_input2.current.focus()}
/>
<CustomTextInput
placeholder="Input 2"
returnKeyType="done"
refInner={ref_to_input2}
onSubmitEditing={/* Do something! */}
/>
</>
)
}
在你的CustomTextInput组件中:
import { TextInput } from "react-native";
export const CustomTextInput = (props) => {
<TextInput
ref={props.refInner}
{...props}
/>
}
设置第二个TextInput焦点，当前一个TextInput的onSubmitEditing被触发时。
试试这个
为第二个TextInput添加一个引用 Ref ={(input) => {this。secondTextInput =输入;}} 绑定焦点函数到第一个TextInput的onSubmitEditing事件。 onSubmitEditing={() => {this.secondTextInput.focus();}} 记住将blurOnSubmit设置为false，以防止键盘闪烁。 blurOnSubmit ={假}
当一切都完成后，它应该看起来像这样。
<TextInput
placeholder="FirstTextInput"
returnKeyType="next"
onSubmitEditing={() => { this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
<TextInput
ref={(input) => { this.secondTextInput = input; }}
placeholder="secondTextInput"
/>
使用回调引用而不是遗留的字符串引用:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description"
ref={nextInput => this.nextInput = nextInput}
/>
下面是如何为reactjs的电话代码输入实现这一点
import React, { useState, useRef } from 'react';
function Header(props) {
const [state , setState] = useState({
phone_number:"",
code_one:'',
code_two:'',
code_three:'',
code_four:'',
submitted:false,
})
const codeOneInput = useRef(null);
const codeTwoInput = useRef(null);
const codeThreeInput = useRef(null);
const codeFourInput = useRef(null);
const handleCodeChange = (e) => {
const {id , value} = e.target
if(value.length < 2){
setState(prevState => ({
...prevState,
[id] : value
}))
if(id=='code_one' && value.length >0){
codeTwoInput.current.focus();
}
if(id=='code_two' && value.length >0){
codeThreeInput.current.focus();
}
if(id=='code_three' && value.length >0){
codeFourInput.current.focus();
}
}
}
const sendCodeToServer = () => {
setState(prevState => ({
...prevState,
submitted : true,
}))
let codeEnteredByUser = state.code_one + state.code_two + state.code_three + state.code_four
axios.post(API_BASE_URL, {code:codeEnteredByUser})
.then(function (response) {
console.log(response)
})
}
return(
<>
<div className="are">
<div className="POP-INN-INPUT">
<input type="text" id="code_one" ref={codeOneInput} value={state.code_one} onChange={handleCodeChange} autoFocus/>
<input type="text" id="code_two" ref={codeTwoInput} value={state.code_two} onChange={handleCodeChange}/>
<input type="text" id="code_three" ref={codeThreeInput} value={state.code_three} onChange={handleCodeChange}/>
<input type="text" id="code_four" ref={codeFourInput} value={state.code_four} onChange={handleCodeChange}/>
</div>
<button disabled={state.submitted} onClick={sendCodeToServer}>
</div>
</>
)
}
export default
如果您恰好像我一样使用tcomb-form-native，您也可以这样做。这里有一个技巧:不是直接设置TextInput的道具，而是通过选项来实现。您可以将表单的字段引用为:
this.refs.form.getComponent('password').refs.input.focus()
所以最终的产品看起来是这样的:
var t = require('tcomb-form-native');
var Form = t.form.Form;
var MyForm = t.struct({
field1: t.String,
field2: t.String,
});
var MyComponent = React.createClass({
_getFormOptions () {
return {
fields: {
field1: {
returnKeyType: 'next',
onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
},
},
};
},
render () {
var formOptions = this._getFormOptions();
return (
<View style={styles.container}>
<Form ref="form" type={MyForm} options={formOptions}/>
</View>
);
},
});
(感谢remcoanker在这里发布的想法:https://github.com/gcanti/tcomb-form-native/issues/96)
