My console.log("triggered") each time I focus a or edit it, no matter the .
How can I isolate my onFocus() ? Thank you.
<TextInput
placeholder="firstname"
textContentType="name"
selectTextOnFocus
onChangeText={value => this._handleStateEdition("firstname", value)}
/>
<TextInput
placeholder="lastname"
textContentType="familyName"
selectTextOnFocus
onFocus={console.log("triggered")}
onChangeText={value => this._handleStateEdition("lastname", value)}
/>
They are already isolated but you can add autofocus = false so that your fields won't get focused automatically, moreover there is another method that I have never used is by using refs.
auto focus method
<TextInput
placeholder="firstname"
textContentType="name"
selectTextOnFocus
autoFocus={false}
onChangeText={value => this._handleStateEdition("firstname", value)}
/>
<TextInput
placeholder="lastname"
textContentType="familyName"
selectTextOnFocus
autoFocus={false}
onFocus={console.log("triggered")}
onChangeText={value => this._handleStateEdition("lastname", value)}
/>
By using Refs
<TextInput
placeholder="firstname"
textContentType="name"
selectTextOnFocus
autoFocus={false}
ref={r=>this.first = r}
onChangeText={value => this._handleStateEdition("firstname", value)}
/>
<TextInput
placeholder="lastname"
textContentType="familyName"
selectTextOnFocus
autoFocus={false}
onFocus={console.log("triggered")}
onChangeText={value => this._handleStateEdition("lastname", value)}
ref={r=>this.last = r}
/>
and inside your componentDidMount listen to onFocus events
componentDidMount(){
this.first.onFocus = ()=>{
//some function
}
this.last.onFocus = ()=>{
//some function
}
}
Related
I'm trying to switch focus between inputs on onSubmitEditing but I can't manage to pass the ref props from my custom text input to the main component.
The console log I've put in the ref doesn't log anything.
const MyCustomInput = (props) => {
<View>
<FormInput
{...props}
editable={!props.disabled}
selectTextOnFocus={!props.disabled}
disable={props.disabled}
displayOnly={props.displayOnly}
small={props.small}
placeholderTextColor={'#AFAFAF'}
/>
</View>
}
<Controller
control={control}
render={({field: {onChange, onBlur, value, ref}}) => (
<MyCustomInput
onBlur={onBlur}
onChangeText={(value: string) => onChange(value)}
value={value}
ref={(r: any) => {
console.log('r', r);
ref(r);
inputRef.current = r;
}}
/>
)}
name="myInput"
/>
Solved, I was missing a forward ref in my custom input
const MyCustomInput = fowardRef((props, ref) => {
<View>
<FormInput
{...props}
ref={ref}
editable={!props.disabled}
selectTextOnFocus={!props.disabled}
disable={props.disabled}
displayOnly={props.displayOnly}
small={props.small}
placeholderTextColor={'#AFAFAF'}
/>
</View>
)}
here is my code the input not submit to the onsubmit function
<TextInput
autoCapitalize={"none"}
style={[styles.textInput, black, semi_h4]}
returnKeyType="done"
numberOfLines={1}
blurOnSubmit={false}
onSubmitEditing={event => {
Keyboard.dismiss();
this.onSubmit();
}}
placeholder="Pin *"
placeholderTextColor={"#313131"}
ref={input => (this.c_pin = input)}
/>
please tell me how to working onsubmitediting
you have to pass text from submit event to the function,
<TextInput
onSubmitEditing={(event) => this.onSubmit(event.nativeEvent.text)}
/>
before installing Formik, my input looked like so:
const [search, setSearch] = useState('');
....
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
name="search"
type="search"
value={search}
onChangeText={(e) => setSearch(e)}
autoCorrect={false}
defaultValue={search}
/>
<Button
disabled={!search}
title="Create"
onPress={(e) => {
createNewCar(e);
}}
/>
</View>
in onChangeText, I would set every character I typed to a state prop called search. With every key that I typed, an API called would be made to get some data from the db.
for example:
if I typed h into the input, the db would return 2 cars honda, hyundai
I read that Formik can simplify a lot of the form setup in React, so I downloaded it, however, the handleChange prop from Formik wants to keep track of values.search
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
handleChange(values.search);
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
Now I can't type into the form because value is pointing at values.search instead of search like it did originally.
Question
How do I fire setSearch in onChangeText but also add search into the formik values prop?
you can make use of setFieldValue('search', e.target.value) instead of handleChange() change the code to the following:
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
//handleChange(values.search);
setFieldValue('search', e.target.value)
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
I'm using native-base's form to handle user's username and password.
When I press next or go from keyboard, it doesn't move cursor to the next or doesn't submit the inputs. How can we fix this?
import { Form } from 'native-base';
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"/>
<AuthFieldInput
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"/>
</Form>
Here is <AuthField> render function
import { Item, Label, Input, Text } from 'native-base';
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
/>
</Item>
Thank you!
I was getting error as "_this2.refs.password.focus" is not a function on onSubmitEditing of TextInput.
This is how I fixed it:
Upgraded package for native-base "^2.4.2” to native-base "^2.7.1”.
Sharing my sample code below:
<Item floatingLabel>
<Label>Mobile Number</Label>
<Input
onChangeText = {(phone) => this.setState({phone})}
value = {this.state.phone}
autoCapitalize="none"
keyboardType='numeric'
returnKeyType={"next"}
maxLength = {10}
onSubmitEditing={(event) => this._password._root.focus()}
/>
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
getRef={(c) => this._password = c}
onChangeText = {(password) => this.setState({password})}
value={this.state.password}
autoCapitalize="none"
returnKeyType={"done"}
secureTextEntry={this.state.hiddenPassword}
onSubmitEditing = {this.handleLogin}
/>
</Item>
<TouchableOpacity>
<Button style={styles.Button}
onPress={this.handleLogin.bind(this)}>
<Text style={styles.buttonText}>
LOGIN
</Text>
</Button>
</TouchableOpacity>
This is basically a TextInput Wrapper from React Native, if what you want to do is that when you press the "next" button, go to the other input you should do the following.
// <AuthField> render function
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
{ ...this.props }
/>
</Item>
And in your Component you can use it in this way:
// Other render
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"
onSubmitEditing={() => {
this.refs.passwowrd.focus();
}}
/>
<AuthFieldInput
ref='password'
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"
/>
</Form>
Update:
Please check the documentation about this feature https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting
It seems that those return types do not do that. This question was asked before also:
React Native: How to select the next TextInput after pressing the "next" keyboard button?
Maybe it can be of some help to you!
I have an issue with onChangeText in password input. Detail explanation for what i want to do: I want to disable submit button initially and when both input field filled then enable submit button. If you have any other ways to solve this please share.
<InputGroup style={styles.inputBox}>
<Icon name='ios-person' style={{color: 'white'}}/>
<Input placeholder='Email' style={styles.input}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.username}
onChangeText={(text) => this.setState({username: text})}
onChange={this.onInputChange} />
</InputGroup>
<InputGroup style={styles.inputBox}>
<Icon name='ios-unlock' style={{color: 'white'}}/>
<Input placeholder='Password' style={styles.input}
secureTextEntry={true}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.password}
onChangeText={(text) => this.setState({password: text})}
onChange={this.onInputChange} />
</InputGroup>
<Button block bordered success style={styles.submitButton} onPress={this.onSignIn} disabled={this.state.submitButtonFlag}>
Sign In
</Button>
code for onChangeInput:
onInputChange() {
if (this.state.username != null && this.state.password != null) {
console.log("this.state.submitButtonFlag: ");
this.setState = {submitButtonFlag: false};
console.log(this.state.submitButtonFlag);
}
}
Two errors:
reference with correct this scope: onChange={() => this.onInputChange()} />
setState is a function: this.setState({submitButtonFlag: false});
You need to bind your method that you are calling or use callback like #zvona mentioned
First way
onChange={this.onInputChange.bind(this)}
Second Way
onChange={() => this.onInputChange()}