I use react native and TextInput.
And if user submits inputText with empty value, I want to give them a message 'please write a comment'.
So I make a register module from useForm with required function.
It seems it prevents empty value created correctly, but alert message is not shown.
<WritingText
{...register("comments", { required: "댓글을 적어주세요." })}
placeholder="댓글을 입력하세요"
onChangeText={(text) => setValue("comments", text)}
onSubmitEditing={handleSubmit(onValid)}
></WritingText>
You can do it using formik, if you don't want to use it, you can try the onBlur callback where you can check your text length and then show an alert.
<WritingText
{...register("comments", { required: "댓글을 적어주세요." })}
placeholder="댓글을 입력하세요"
onChangeText={(text) => setValue("comments", text)}
onSubmitEditing={handleSubmit(onValid)}
onBlur={handleBlur}
></WritingText>
Related
I have a state:
const [userName, setUserName] = useState('');
Next, I have the TextInput as:
<TextInput style={styles.value}
keyboardType={'default'}
placeholder={'Your Name'}
value={userName}
editable={true}
onChangeText={(value) => {
setUserName(value)
}} />
The on a button's onPress event I'm calling this function:
function saveButtonPressed() {
alert("The Value of Name is " + userName);
}
The problem is I can see the vvalue getting updated in the text field, but in the alert I still see '' and if I save tthe coe again the second time it shows the updated value.
The reason they don't show the current value has to do with your functions forming closures. Even if the value of userName changes, it is still a const and since the function where this was updated still has scope in the 1st re-render the updated value wont show. Instead when the scope changes outside the closure thats when you get the updated value in the 2nd re-render.
The first link has solutions for this.
The second link has a bit more information about hooks.
These should answer your question in detail. https://stackoverflow.com/a/58877875/9745240 https://stackoverflow.com/a/54069332/9745240
And a read about closures should help you.
I'm in the process of creating my own NumberInput component using react-natives TextInput. However I'm having trouble trying to validate the input the user is trying to submit/enter in to the field. I have a regex to check if the value the user is trying to input is a number, if it is we update the state number, if not I dont want the value to update the state. The regex works but when the user tries to enter any other character than an number, say , or ., the input field flickers showing the character but quickly erases it so to say.
I've recorded a gif showing what I mean (https://i.gyazo.com/9f86dbfd7d7cba17c480a7b4c456e004.mp4). Is there any way to prevent the flickering? I am already implementing the onTextChange so I don't see how the value even tries to get updated.
const Container = () => {
const [number, setCurrentNumber] = useState();
const numberRegex = /^\d+$/;
const numberValidation = (updatedValue) => {
if (numberRegex.test(updatedValue)) {
setCurrentNumber(updatedValue);
}
};
return (
<View>
<TextInput
value={number ? number.toString() : undefined}
onChangeText={(value) => numberValidation(value)}
keyboardType="numeric"
/>
</View>
);
};
I am trying to select item from picker item. problem is when i clicked on item then on function handler onValueChangeJob(value) perform some task
onValueChangeJob(value) {
this.setState({ jobValue: value.jobTitle})
USE value.number form another task
});
}
Below is my picker component
<Picker
style={commonStyle.pickerStyle}
textStyle={commonStyle.textStylePicker}
headerTitleStyle={commonStyle.headerTitleStyle}
headerBackButtonTextStyle={commonStyle.headerBackButtonTextStyle}
iosIcon={<Icon name="ios-arrow-down" />}
mode="dropdown"
placeholder="MAKE A SELECTION"
placeholderStyle={commonStyle.placeholderStyle}
note={false}
itemTextStyle={commonStyle.itemTextStyle}
selectedValue={this.state.jobValue}
onValueChange={this.onValueChangeJob.bind(this)}
>
{jobItems}
</Picker>
While The jobitems coming from map which created in render() function like
jobItems = this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v} label={v.jobTitle} />
});
So here if I used directly in picker.item props value-{v.jobTitle} then selected value change but i want to use whole object v in onValueChangeJob(value) function. One main thing state update but cant displaying on selected value of picker
tried lots of different things but not happening the thing what i want.
how should i handle this with proper example as i am new in react native.
Look at how my picker looks in this image
After lots of googling on one solution i find that solution that i have to filter this.state.jobTypesList this array on onValueChange handler and grab objects of particular job Title
return this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v.jobTitle} label={v.jobTitle}
});
let filterArray = this.state.jobTypesList.filter((v) => v.jobTitle === value)[0]
filterArray.jobTitle
filterArray.jobNumber
If you are using yup schema and validations, then you can use getValues() in selectedValue property.
I resolved it by
<Picker
selectedValue = {getValues('storeId')}
onValueChange={itemValue =>
setValue('storeId', itemValue, true)
}>
.../>
three questions:
1) if you have multiple textInput fields how do you determine which one is being used?
2) with both onchangeText and onsubmitEditing what is being returned to the function
onSubmitEditing={()=>{this.clearText()}}
onChangeText={(text) => {this.captureInput(text)}}
I get that in onChangeText() text gives me the value in the input field. Are there any other parameters being passed back to that function?
Also, in onsubmitEditing() how do I access the event parameters being passed to clearText()?
I've read the documentation found here DOCS but it doesn't answer my question
3) Where in the documentation do you find these answers?
1) You just call different handlers to handle them separately:
<TextInput onChangeText={text => this.handleFirstInput(text)} />
<TextInput onChangeText={text => this.handleSecondInput(text)} />
2) There's no other parameters passed to them. What else do you need? You can set a ref on them but avoid that if possible.
Im having a strange issue where manually blurring and input in one spesific case will not work.
If i click the first input, then focus the second input by using the submit key on the keyboard, the onChangeText function on the second input will blur when text length reaches 2.
But if i focus the second input while the fist input is focused by clicking directly on it, the blur method called in the onChangeText will not blur the second input, and the keyboard will remain open.
onChangeText(text) {
if(text.length === 2) this.secondInput.blur();
}
onSubmitFirst() {
this.firstInput.blur();
this.secondInput.focus();
}
render() {
return (
<TextInput ref={ref => {this.firstInput = ref} onSubmitEditing={this.onSubmitFirst}/>
<TextInput ref={ref => {this.secondInput = ref} onChangeText={this.onChangeText}/>
)
}
I have also tried with Keyboard.dismiss(); dismissKeyboard(); neither will blur the second input if it was focused while the first input was also focused. I need to be able to blur this input by code to prevent the keyboard from remaining open.
EDIT
It seems .blur() will only work if .focus() has been called manually.
If i add onBlur={() => this.secondInput.focus()} to the first textinput the .blur() method will work even if im jumping to the next input by clicking on it