我有一个名为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>
);
}
}
我的屏幕:
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"
/>
);
}
}
在上面的代码中,我有我在屏幕中使用的 ImageTextField 组件,我想聚焦下一个字段,如果用户按键盘中的下一个键,则需要跳转到第二个字段。
添加一个 prop,它将检索输入对 ImageTextField 组件的引用。所以你的渲染函数应该看起来像:
render() {
const {
placeHolderValue, value, editable, inputRef
} = this.props;
return (
<View>
<TextInput
placeholder={placeHolderValue}
placeholderTextColor="#b1b1b1"
value={value}
editable={editable}
ref={inputRef}
/>
</View>
);
}
然后,您的应用组件将如下所示:
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}
/>
);
}
组件名称 = 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>
);
}
然后,您的应用组件将如下所示:
<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')}
/>