I have a component with an TextInput & Text :
const InputWithMessage = ({ label, formikProps, formikKey,ref, ...rest }) => {
if (formikProps.touched[formikKey] && formikProps.errors[formikKey]) {
styles.inputStyles.borderColor = 'red';
}
return (
<View style={styles.inputStyles}>
<TextField
lineWidth={0}
activeLineWidth={0}
style={styles.textFieldStyles}
label={label}
ref={ref}
tintColor={
formikProps.touched[formikKey] && formikProps.errors[formikKey]
? colors.red
: colors.primary
}
onChangeText={e => formikProps.setFieldValue(formikKey, e)}
onBlur={formikProps.handleBlur(formikKey)}
{...rest}
/> .....
This component is used in a formik form with refs to go from one input to another :
<View style={{width: '50%',marginRight: 1}}>
<InputWithMessage
formikProps={formikProps}
formikKey="firstName"
value={formikProps.values.firstName}
placeholder="Prénom*"
returnKeyType="next"
ref={this.firstName}
onSubmitEditing={() => {
this.birthName.current.focus()
}}
blurOnSubmit={false}
keyboardType='default'
autoFocus
/> ....
I shove my refs like this in the constructor: this.birthName = React.createRef();
Except that my dreams are all the time null and so the focus can not be done...
any ideas?
I think your focus call is incorrect, you need to chain to root off of current.
so inside of your onSubmitEditing you need
this.birthName.current._root.focus();
You should set the same name.
this.birthName = React.createRef();
...
<TextField
ref={this.birthName}
...
/>
...
<InputWithMessage
...
onSubmitEditing={() => {
this.birthName.current.focus()
}}
...
/>
Example Usage Example Link
import * as React from 'react';
import { Text, View, StyleSheet,TextInput,Button } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
this.textInput2 = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
this.textInput.current.focus();
}
render() {
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
<TextInput ref={this.textInput} style={{width:"80%", height:30,backgroundColor:"blue",color:"#ffffff"}}/>
<TextInput ref={this.textInput2} style={{width:"80%", height:30,backgroundColor:"red",color:"#ffffff"}}/>
<Button title="focus button" onPress={this.focusTextInput}/>
</View>
);
}
}
Use a regular callback ref
when using React 16.3
or earlier.
constructor(props) {
super(props);
this.textInput = null;
this.focusTextInput = () => {
if (this.textInput) this.textInput.focus();
};
}
....
<Text ref={ element => { this.textInput = element}} > </Text>
<Button title="Focus the text input" onPress={this.focusTextInput} />
You should use innerRef
instead of ref
and aswell dont forget to use .current
Example
this.birthName.current._root.focus();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.