I have a problem trying to get the data from text inputs.
The problem occurs when I try to fill an input, everytime I enter a character the cursor stop being in the input field and I need to click again in the field to continue writing. It's like if when I enter a letter the focus on the input dissapear.
I tried to put an 'autofocus' on the textfield, works but the cursor goes to the next text field.
I'm using material ui
<Typography id="modal-modal-title" variant="h6" component="h2">
password
</Typography>
<TextField
fullWidth
type="text"
placeholder="password"
sx={{ mt: 3 }}
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Typography id="modal-modal-title" variant="h6" component="h2" sx={{ mt: 3 }}>
recover password
</Typography>
<TextField
fullWidth
type="text"
placeholder="recover contraseña"
sx={{ mt: 3 }}
required
value={rPassword}
onChange={(e) => setRPassword(e.target.value)}
/>
Related
i was able to open date picker with button i am trying to open it with text input
here is i how i open my calender
<Button onPress={displayDatepicker} title="Show date picker!" />
i am looking for something like this that will open the calender when clicked on textinput fild
<TextInput
style={styles.forminput}
label=" Date of Birth"
value=""
onclick={displayDatepicker}
/>
You can wrap your code like this,
<TouchableOpacity
activeOpcaity={1}
onPress={() => setShowCalender(true)}>
<TextInput value={calenderDate} />
</TouchableOpacity>
Try this maybe it will work.
<TextInput
style={styles.forminput}
label=" Date of Birth"
value=""
onPressIn={displayDatepicker}
/>
or this will also work,
<TextInput
style={styles.forminput}
label=" Date of Birth"
value=""
onFocus={displayDatepicker}
/>
I am not able to focus to next floating label TextInput.My code sample is here.I get error as undefined is not a function(evaluating this.refs.LastName.focus()).
Did anyone face this problem? please help me, thanks in advance.
<Item floatingLabel style={styles4.floatinglbl}>
<Label style={styles4.LblTxt}>First Name</Label>
<Input editable={true}
value = {this.state.FirstName}
returnKeyType={'next'}
autoFocus={true}
onChangeText={this.onFirstNameEditHandle}
style={styles4.LblInpTxt}
autoCapitalize={true}
onSubmitEditing={(event) => {
this.refs.LastName.focus();
}}
/>
</Item>
<Item floatingLabel style={styles4.floatinglbl}>
<Label style={styles4.LblTxt}>Last Name</Label>
<Input editable={true}
value={this.state.LastName}
ref={'Lastname'}
returnKeyType={'next'}
onChangeText={this.onLastNameEditHandle}
style={styles4.LblInpTxt}
autoCapitalize={true}
/>
</Item>
Holy hell this almost drove me up a wall. After 30 minutes of trying to figure out how to move a cursor from one box to another I finally sorted it out. If anyone has the misfortune of somehow being in the same position as I was (of wanting to move focus from one text input to another...), here's apparently a way to do it. I didn't see this in any of the documentation or anything and I think it's largely just a quirk of of how NativeBase operates. You can't reference ref. You have to reference ref.wrappedInstance. I'm assuming that their Input wraps TextInput for doing tricks like the floatingLabel.
<Form>
<Item floatingLabel>
<Label>Username</Label>
<Input
autoCapitalize="none"
autoCorrect={false}
spellCheck={false}
underlineColorAndroid="transparent"
onChangeText={username => this.setState({ username })}
value={username}
blurOnSubmit={false}
returnKeyType="next"
onSubmitEditing={() => { this.passwordInput.focus() }}
/>
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
getRef={ref => {
this.passwordInput = ref.wrappedInstance // <-- notice
}}
autoCapitalize="none"
underlineColorAndroid="transparent"
secureTextEntry={true}
onChangeText={password => this.setState({ password })}
onSubmitEditing={() => { this.submit() }}
value={password}
/>
</Item>
</Form>
refs is being used by this._textInput and this._root.
Therefore you can use
this.refs.Lastname._root.focus()
Refer docs for FloatingLabel https://docs.nativebase.io/Components.html#floating-label-headref
It is mentioned in docs that,
When using floatingLabel, use getRef to get the reference of
component. Always wrap floatingLabel component in <Form/>.
try :
<Item floatingLabel>
<Label>First Name</Label>
<Input
getRef={input => {
this.firstNameRef = input;
}}
onSubmitEditing={() => {
this.lastNameRef._root.focus();
}}
returnKeyType={"next"}
/>
</Item>
And
<Item fixedLabel>
<Label>First Name</Label>
<Input
ref={input => {
this.lastNameRef = input;
}}
onSubmitEditing={() => {
this.lastNameRef._root.focus();
}}
returnKeyType={"next"}
/>
</Item>
When using TabbedForm in react-admin, Create view will remove input value when switch tab. It doesn't happend with Edit view.
In redux state, ##redux-form/INITIALIZE action is the different between 2 views. Anyone has any idea why?
<Create {...props}>
<TabbedForm>
<FormTab label="rate">
<TextInput source="name" label="Name"/>
<NumberInput source="rate" label="Rate" defaultValue="0" />
</FormTab>
<FormTab label="score">
<TextInput source="score" label="Score"/>
<NumberInput source="number" label="Number" defaultValue="0" />
</FormTab>
</TabbedForm>
</Create>
I am building a profile page and have the following components.
1. I have a image picker for the profile picture
2. ListView with text fields and a button
And i have a bottom bar navigation. With the current implementation the bottom tab bar hides the button at the bottom, and i am not able to figure out a way to solve this. Any help would be appreciated. Below is the code snippet,
render(){
let {phone} = this.state,
{studentName}=this.state,
{studentClass}=this.state,
{bloodGroup}=this.state,
{parentName}=this.state,
{email}=this.state,
{sibling}=this.state,
{siblingClass}=this.state,
{address}=this.state;
return(
<View style={styles.studentInfo}>
<TextField
label='Student Name'
value={studentName}
onChangeText={(studentName)=>this.setState({studentName})}
/>
<TextField
label='Class'
value={studentClass}
onChangeText={(studentClass)=>this.setState({studentClass})}
/>
<TextField
label='Blood Group'
value={bloodGroup}
onChangeText={(bloodGroup)=>this.setState({bloodGroup})}
/>
<TextField
label='Parent Name'
value={parentName}
onChangeText={(parentName)=>this.setState({parentName})}
/>
<TextField
label='Phone Number'
value={phone}
onChangeText={(phone)=>this.setState({phone})}
/>
<TextField
label='E mail'
value={email}
onChangeText={(email)=>this.setState({email})}
/>
<TextField
label='Sibling Studying in the school'
value={sibling}
onChangeText={(sibling)=>this.setState({sibling})}
/>
<TextField
label='Class'
value={siblingClass}
onChangeText={(siblingClass)=>this.setState({siblingClass})}
/>
<TextField
label='Address'
value={address}
onChangeText={(address)=>this.setState({address})}
/>
<Button
style={{backgroundColor: '#3e9cd3'}}
textStyle={{fontSize: 18}}
onPress={()=> this.handleButtonPress()}>
Save
</Button>
</View>
);
}
I have several TextInputs with the prop 'form' to identify the forms they belong to.
<TextInput form="user" name="first_name" placeholder="First Name"/>
<TextInput form="user" name="last_name" placeholder="Last Name"/>
<TextInput form="login" name="username" placeholder="Username"/>
How do I loop through components that have the prop form="user", in this case I would want to get first_name and last_name and leave out username.