<TextInput
placeholder="Full Name"
onChangeText={userName => this.setState({ userName })}
onChangeText={text => this.validate(text, "username")}
underlineColorAndroid="transparent"
style={[
styles.TextInputStyleClass,
!this.state.nameValidate ? styles.error : null
]}
blurOnSubmit={false}
autoFocus={true}
autoCorrect={true}
autoCapitalize="none"
maxLength={25}
/>
in the above code, I use two Onchagnetext events but only on event work that calls validation another is not working means not take value. why how to fix it.
how can I use two Onchangetext events?
You don't need two onChangeText method.
If you want to validate and use setState together then you can do
...
onChangeText={userName => this.setState({ userName },
() => this.validate(username, 'username)})}
The callback in setState ensures that you are calling the method once the setState has finished updating the state
Related
I am getting the text of the TextInput using onChangeText event and state.
<View style={styles.inputContainerStyle}>
<TextInput
autoFoucs={true}
ref={inputRef}
style={styles.textInputStyle}
placeholder="type here ..."
placeholderTextColor='#838389'
multiline
underlineColorAndroid="transparent"
onChangeText={text => handleTextChange(text)}
value={selectedText}
/>
<TouchableOpacity style={styles.submitBtnWrapperStyle} onPress={() => handleMsgSend()}>
<Icon name={msgEditMode ? "check" : "paper-plane"} size={20} color="#ffffff" />
</TouchableOpacity>
</View>
...
// handle text change on textinput
const handleTextChange = text => {
channel && channel.typing();
setSelectedText(text);
}
But actually whenever text is changed, the render function also is called because of changing state value and it is making the whole screen more slow.
So I am looking for the alternative way to get the text not using onChangeText event.
Is there any native way to get the text using ref?
I hope kind help.
thanks...
Yes, you can access the value of text input using ref like this
this.inputRef._lastNativeText
This is the text input that I am using, I want the input field to be disabled after entering a value.I tried using editable props, but it did not help.
I am completely new to react native, please help with an example.
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
As per the question, since the field should get disabled when it has some value:
<View style={editProfileStyle.textinputView}>
<TextInput
editable={this.state.subQualification.length === 0}
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
using check in your editable prop of
editable={this.state.subQualification.length === 0} will make field editable when nothing in present in the field
Try to add state and modify your textInput props like this:
state ={
textDisable: true
}
render() {
return (
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
editable={this.state.textDisable}
onEndEditing={() => this.setState({textDisable: false})}
/>
</View>
);
}
}
after onsubmit the input should be disable.
I suspect that I may not be able to do this at the moment.. but it doesn't hurt to ask for some ideas! I have multiple multiline TextInputs on a single page, that I would like to be able to use the "next" button in order to switch to the next TextInput.
I can switch inputs without issue, however... I have to choose between using "blurOnSubmit" - which does not add a new line, but it does dismiss the keyboard. This makes the android experience really poor when the next input is focused. It does the same for iOS, but iOS handles it a little better.
Or, I can not use blurOnSubmit, and then I need to ensure I update the state myself to manually remove the '\n' that is added...
Does anyone have a better solution?
A typical page looks something like this (cleared all decoration and view vs edit logic):
<View>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueA) => this.setState({ valueA })}
onSubmitEditing={() => this._onSubmitEditing(this.refs.B)}
returnKeyType={"next"}
value={this.state.valueA}
ref="A"
/>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueB) => this.setState({ valueB })}
onSubmitEditing={() => this._onSubmitEditing(this.refs.C)}
returnKeyType={"next"}
value={this.state.valueB}
ref="B"
/>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueC) => this.setState({ valueC })}
onSubmitEditing={this._validateAndSave}
returnKeyType={"done"}
value={this.state.valueC}
ref="C"
/>
</View>
Related Function:
_onSubmitEditing (nextRef) {
if(!!nextRef && nextRef.focus) {
nextRef.focus();
}
}
Came here since I had TextInput was adding a newline when hitting done.
In your TextInput add:
blurOnSubmit={true}
or just
blurOnSubmit.
Default value for single-line fields is true, but, for multiline fields it's false.
Found here: https://github.com/wix/react-native-autogrow-textinput/issues/25#issuecomment-328243174
I'm using React Native's TextInput. I want to disable return key as per the requirement. Is there any way to disable/enable return key by custom code?
I tried with enablesReturnKeyAutomatically but it doesn't work.
Yes we can, by using the onSubmitEditing props for TextInput. Posting sample here:
<TextInput
value={password}
returnKeyType="done"
onSubmitEditing={() => {
if (password != '') {
onLoginPressed();
}
}}
placeholder="Password"
sub_place="PASSWORD"
onChangeText={value => setPassword(value)}
blurOnSubmit={false}
ref={passwordFocus}
/>
I want to retrieve user input inside a functional component (I am using a redux architecture). However when I console.log() a referenced item, I get a constructor, not the actual object.
How can I get the user input without manipulating state?
<Modal visible={visibleModal === 'addRoom'} onRequestClose={() => null}>
<TextInput ref={el => {roomName = el}} style={styles.input} />
<Button onPress={() => store.dispatch(hideModal())}>Cancel</Button>
<Button onPress={() => {
store.dispatch(addRoom({name: roomName.value}))
return store.dispatch(hideModal())
}}>OK</Button>
</Modal>
You cannot get the value of a TextInput by ref with React Native. The only way to get the text from an input is to subscribe to change events.
Try .value when you access your TextInput through ref