I have a textinput like this:
<TextInput
secureTextEntry={true}
autoCompleteType="password"
onChangeText={val => setClave(val)}
/>
and the component is:
const [clave, setClave] = useState('');
which is just for the password, because it is a login screen.
So i press a button and execute some functions that validates the textInput data, and when is all ready, navigate to another screen,
my final function that navigates to another screen is this:
const goInicio = () => {
setClave('')
navigation.navigate('Home')
};
and what i tried to do there is to set the state of clave to an empty string but if i navigate back to the login screen the password will still be written, even though its value changed, and it no longer works to log in, it is still showing as if it has something written, how can i fix that?
The internal value state of TextInput and clave are unrelated since you have not set clave to be the value prop of TextInput. You are changing clave in the onChange method of the TextInput but not the other way around. This direction is one directional.
Instead, set the value prop of the TextInput to be equal to clave
<TextInput
value={clave}
secureTextEntry={true}
autoCompleteType="password"
onChangeText={val => setClave(val)}
/>
Related
Purpose:
After the keyboard pops up, a shortcut input box with the specified text appears above it. After clicking, the corresponding text such as"https://" or "www." will be appended to the dialog box.
Problem:
I can't get the value in the input dialog in real time and modify it by functions other than keyboard input.
effort made：
The dialog I'm using is referenced from react-native-dialogs。I can't find a way to pass state into the input area of this dialog.
Also didn't find a way to get the value of the live input.
I thought if there are other dialog components that support getting the value of the modified input, but I didn't find one.
Notice that the Dialog.Input of react-native-dialog is just a TextInput. Thus, we can achieve this as usual using the onChangeText callback and the value prop of TextInput.
Here is a minimal example.
const [visible, setVisible] = useState(false);
const [value, setValue] = useState("");
return (
<View style={styles.container}>
<Button title="Show dialog" onPress={() => setVisible(true)} />
<Dialog.Container visible={visible}>
<Dialog.Title>Please enter the url you want to bookmark</Dialog.Title>
<Dialog.Description>
Message - optional
</Dialog.Description>
<Dialog.Input onChangeText={setValue} value={value} />
<Dialog.Button label="Ok" onPress={() => setVisible(false)} />
<Dialog.Button label="Set Text via function" onPress={() => setValue("Hello World")} />
</Dialog.Container>
</View>
);
The state value will be updated while you are typing. You have access to it while the dialog is open. You can set the value manually by using the setValue function of the value state as usual. This can be done while the dialog is open.
Here is a little snack for showcasing.
I'm trying to create a text input, but whenever I type in the box, the cursor goes away after one keystroke and requires me to reclick the box.
This is how I set the state const [text, setText] = useState('');
This is my component
<TextInput
placeholder="Enter text here"
multiline={true}
maxLength={200}
onChangeText={(text: string): void => setText(text)}
value={specialRequest}
returnKeyType="done"
blurOnSubmit={true}
/>
I have this same error of refreshing with my RNPickerSelect. Why might this be happening?
You are registering the changes of input to text, while display a different value specialRequest.
Try taking out the line value={specialRequest}, or change it to defaultValue={specialRequest}.
I want to change the state of a parent component from a child's TextInput.
The problem is every time it changes the parent state the component re-renders, the TextInput is blurred and the keyboard disappears.
I tried keeping all the logic in the some component and changing the parent state without passing props. Now I've tried extracting the InputText container and putting it into a new file, changing the parents' state and receiving the value through the props, that's not working either.
Here is the text field component:
export default (ProfileTextInput = ({
placeholder,
label,
handleChange,
name,
value
}) => {
return (
<View style={styles.inputComponent}>
<Text style={styles.labelText}>{label.toUpperCase()}</Text>
<TextInput
key={Math.random()}
placeholder={placeholder || ""}
value={value}
onChangeText={val => handleChange(val, name)}
/>
</View>
);
});
and this is how it's being used:
const [newUserData, setNewUserData] = useState({ ...userData });
const changeHandler = (value, name) => {
setNewUserData({ ...newUserData, [name]: value });
};
return(
<ProfileTextInput
label="Username"
defaultValue={newUserData.username}
name="username"
value={newUserData.username}
handleChange={changeHandler}
/>
)
I expected it to continue letting me type like a normal TextInput, but it's only typing one letter and losing focus.
Try removing the defaultValue props from your components.
defaultValue is just the initial value passed to an uncontrolled component. Since you're setting the input value with a change handler, that makes your input a controlled component, and so you should just set the value explicitly.
Read these articles for more details on the differences between these cases:
React forms and controlled components
Uncontrolled components
I know this question is already asked but i didn't find any proper solution. So here is my question, i want to pass TextInput value to another screen on submit button.So, please tell me How to pass the value and display on another screen. I am new in react native development.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
<TextInput onChangeText={text => this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => navigate('OtherComponent', { text: this.state.text} )}
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => this.props.navigation.navigate('OtherComponent', { text: this.state.text} );
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
In React Native, I want to pass the value of the TextInput in the onBlur event handler.
onBlur={(e) => this.validateText(e.target.value)}
e.target.value works for plain React. But, in react-native, e.target.value is undefined. What is the structure of event args available in React Native?
You should use the 'onEndEditing' method instead of the 'onBlur'
onEndEditing?: function Callback that is called when text input ends.
onBlur is a component function where onEndEditing is specific for TextInput
onEndEditing
This approach works for both multiline and single line.
<TextInput
onEndEditing={(e: any) =>
{
this.setState({textValue: e.nativeEvent.text})
}
}/>
In React Native, you can get the value of the TextInput from e.nativeEvent.text.
Unfortunately, this doesn't work for multiline={true}. One hack around this is to maintain a ref to your TextInput and access the text value through the _lastNativeText property of the component. For example (assuming you've assigned your TextInput component a ref of "textInput"):
onBlur={() => console.log(this.refs.textInput._lastNativeText)}
Simple solution:
This way onBlur your state's email will always have the last value changed by the user.
validate = () => {
const { email } = this.state
console.log('Validating Email Here!', email)
}
<TextInput
style={styles.input}
placeholder='E-mail'
onChangeText={email => this.setState({email})}
onBlur={e => this.validate()}
/>