[英]How to focus the next field of input, in react-native component
I have one component called ImageTextField: 我有一个叫做ImageTextField的组件:
import React from 'react';
import {TextInput, View } from 'react-native';
export default class ImageTextField extends React.Component {
render() {
const {
placeHolderValue, value, editable
} = this.props;
return (
<View>
<TextInput
placeholder={placeHolderValue}
placeholderTextColor="#b1b1b1"
value={value}
editable={editable}
/>
</View>
);
}
}
My screen: 我的萤幕:
import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import ImageTextField from '../../custom-elements/ImageTextField';
export default class App extends React.Component {
render() {
return (
<ImageTextField
onChangeText={text => this.onNameChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="Name"
value={this.state.name}
autoCapitalize="words"
/>
<ImageTextField
onChangeText={text => this.onEmailChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="E-mail"
value={this.state.email}
keyboardType='email-address'
/>
<ImageTextField
onChangeText={text => this.onPhoneChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="Phone"
value={this.state.phone}
keyboardType="phone-pad"
/>
);
}
}
In above code, i have ImageTextField Component which i am using in my screen, i want to focus the next field, if user press next key in keyboard its need to be jump on second field. 在上面的代码中,我有我正在屏幕上使用的ImageTextField组件,我想关注下一个字段,如果用户按键盘上的下一个键,则需要在第二个字段上跳转。
Add a prop which will retrieve the ref of the input to your ImageTextField component. 添加一个道具,该道具将把输入的引用检索到ImageTextField组件。 So your render function should look like:
因此,您的渲染函数应如下所示:
render() {
const {
placeHolderValue, value, editable, inputRef
} = this.props;
return (
<View>
<TextInput
placeholder={placeHolderValue}
placeholderTextColor="#b1b1b1"
value={value}
editable={editable}
ref={inputRef}
/>
</View>
);
}
Then your App component will look like: 然后您的App组件将如下所示:
render() {
return (
<ImageTextField
onChangeText={text => this.onNameChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="Name"
value={this.state.name}
autoCapitalize="words"
onSubmitEditing={() => this.emailAddress.focus()}
/>
<ImageTextField
onChangeText={text => this.onEmailChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="E-mail"
value={this.state.email}
keyboardType='email-address'
inputRef={ref => this.emailAddress = ref}
onSubmitEditing={() => this.phoneNumber.focus()}
/>
<ImageTextField
onChangeText={text => this.onPhoneChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="Phone"
value={this.state.phone}
keyboardType="phone-pad"
inputRef={ref => this.phoneNumber = ref}
/>
);
}
Component Name= MyTextInput 组件名称= MyTextInput
render() {
return (
<View>
<TextInput
onChangeText={this.props.onChangeText}
placeholder="some text"
value={this.state.value}
ref={this.props.inputRef}
onSubmitEditing={this.props.onSubmitEditing}
/>
</View>
);
}
Then your App component will look like: 然后您的App组件将如下所示:
<MyTextInput
onChangeText={text => this.onNameChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="Name"
value={this.state.name}
autoCapitalize="words"
onSubmitEditing={() => this.email.focus()}
/>
<MyTextInput
onChangeText={text => this.onNameChange(text)}
color={Colors.textFieldBlack}
placeHolderValue="email"
value={this.state.name}
autoCapitalize="words"
inputRef={ref => this.email = ref}
onSubmitEditing={() => alert('submitted')}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.