我定义了两个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字段。我怎样才能做到呢?
谢谢!
我的场景是< CustomBoladonesTextInput />包装一个RN < TextInput />。
我是这样解决这个问题的:
我的表单是这样的:
<CustomBoladonesTextInput
onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
returnKeyType="next"
... />
<CustomBoladonesTextInput
ref={ref => this.customInput2 = ref}
refInner="innerTextInput2"
... />
在CustomBoladonesTextInput的组件定义中,我像这样将refField传递给内部的ref道具:
export default class CustomBoladonesTextInput extends React.Component {
render() {
return (< TextInput ref={this.props.refInner} ... />);
}
}
瞧。一切恢复正常。
希望这能有所帮助
结合@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"
/>
使用react-native 0.45.1我还遇到了问题,试图在按下用户名TextInput的返回键后将焦点设置在密码TextInput上。
在尝试了这里的大多数顶级解决方案之后,我在github上找到了一个解决方案,满足了我的需求:
https://github.com/shoutem/ui/issues/44#issuecomment-290724642
总结一下:
import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';
export default class TextInput extends Component {
render() {
const { props } = this;
return (
<RNTextInput
{...props}
ref={(input) => props.inputRef && props.inputRef(input)}
/>
);
}
}
然后我这样使用它:
import React, {Component} from 'react';
import {
View,
} from 'react-native';
import TextInput from "../../components/TextInput";
class Login extends Component {
constructor(props) {
super(props);
this.passTextInput = null
}
render() {
return (
<View style={{flex:1}}>
<TextInput
style={{flex:1}}
placeholder="Username"
onSubmitEditing={(event) => {
this.passTextInput.focus()
}}
/>
<TextInput
style={{flex:1}}
placeholder="Password"
inputRef={(input) => {
this.passTextInput = input
}}
/>
</View>
)
}
}