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}.
Related
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)}
/>
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.
<Dialog.Container visible={this.state.dialogSendEmailVisible}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email"></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
I have this simple dialog, this is being used for password recovery purposes. I am not a FE developer, and I am not finding how can I pass the value typed on Email field to handleSendEmail function. Github and npm pages do not have any example.
Github page: https://github.com/mmazzarolo/react-native-dialog
PS: This can be a very react native basic feature, but I am not findindg a way...
Assuming that the Dialog Inputs/Button extend React Native's own - then you can call:
onSubmitEditing and onChangeText
From the docs:
onSubmitEditing
Callback that is called when the text input's submit button is
pressed. Invalid if multiline={true} is specified.
TYPE REQUIRED
function No
And
onChangeText
Callback that is called when the text input's text changes. Changed
text is passed as an argument to the callback handler.
TYPE REQUIRED
function No
It means something like below:
<Dialog.Input label="Email"
onChangeText={email => this.setState({email})}
value={this.state.email}
onSubmitEditing={
(event) => this.doSomethingWithSubmit(event)
}
>
</Dialog.Input>
UPDATE
So I have tested this, and it works as below - side note - I'm using Typescript so just remove the types ( : string) etc:
In Render
return (
<View>
<View>
<Button onPress={this.showDialog}>
<Text>Show Dialog</Text>
</Button>
<Dialog.Container visible={true}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email" onChangeText={(email : string) => this.handleEmail(email)}
></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
</View>
</View>
)
handleEmail:
private handleEmail = (email : string) => {
console.log("email");
console.log(email);
}
Result:
Further
As a side note of this project, I noticed when I used Live reload - that the Dialog was never re-rendered rather, rendered on top of the old Dialog. I would take this into consideration. Perhaps it was my environment, but everything else worked fine.
I have one text input in which i'm gonna typing some name while user typing the name get translated and back to set in text Input field how can i do this
<TextInput
style={{color:'black',width:width-60, borderColor: 'black'}}
underlineColorAndroid='black'
placeholderTextColor="black"
onChangeText={ (textValue) => this.setState({
input: textValue}) }
/>
// TRANSLATED TEXT
<PowerTranslator
text={this.state.input} />
TextInput have prop named "value".
For setting data to text input, you should set "value" to state value.
<TextInput
value={this.props.input}
/>
https://facebook.github.io/react-native/docs/textinput.html#value
In your code, power translator view component only for displaying text.
If you look at this component page, you should use it as service for getting translated text.
Translation.get('Engineering physics or engineering science').then(translated => {
//Do something with the translated text });
I have the following issue with a TextInput
User types: Hello
Input field shows Hello
I clear the text input without losing focus
Input field shows ""
User types: A
Input field shows HelloA
If the user removes the focus from the TextInput and focuses back on it before typing again, the behavior goes as expected and the new text contains only the input from after the clearing
How can I properly clear the TextInput without the need to go off focus?
Here is the minimum code required to trigger the issue:
export default class MyInput extends Component {
clearInput() {
this.textInput.clear();
}
render() {
return (
<View>
<Button title="clear" onPress={this.clearInput.bind(this)} />
<TextInput
ref={component => (this.textInput = component)}
/>
</View>
);
}
}