I have a field where I only want the length to be 3 numbers long max. I am using Yup, however, it only notifies the user of the error, it doesn't stop the user from entering a number longer than desired.
To fix this I created a function that slices the input value. This looks like it works, it keeps the length in the form field to what I want, however, when I click submit the value for the field is the unsliced version.
Here is my code...
<TextInput
style={styles.text}
value={_checkLength(values.number, 3)}
onChangeText={handleChange('number')}
onBlur={() => setFieldTouched('number')}
placeholder="Number"
/>
My _checkLength function is simple...
_checkLength = (value, length) => {
return value.slice(0, length)
}
Why is this not working?
Leaving this answer so people can see how to use setFieldValue, but #Carlos had the correct and obvious answer. That is to simply use maxLength={num}
Credit to #MohammedAshfaq . His answer is correct but I wanted to provide exact code that needs to be updated. The answer was to run setFieldValue by putting it in the onChangeText field. I had to pass in the value and then run my function using that passed in value. Now, when I submit it submits the proper value returned from the _checkLength function.
<TextInput
style={styles.text}
value={values.number}
onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
onBlur={() => setFieldTouched('number')}
placeholder="Uniform Number"
/>
Related
I have a TextInput field that when a user is editing, they have the option to cancel. The goal is to revert the TextInput value back to the original value before the user started editing, however, even though the previous value is stored and the screen is re-rendering, the text on the screen stays however the user left it. I'm assuming I'm just misunderstanding how the TextInput component works.
This is the input in question:
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{workout.name}
</TextInput>
and this is the cancel button:
<TouchableOpacity
style={styles.workoutheadericon}
onPress={() => {
console.log('Reverting to: ' + prevWorkoutName, prevWorkoutType, prevWorkoutWeight, prevWorkoutReps);
setWorkoutName(prevWorkoutName);
setWorkoutType(prevWorkoutType);
setWorkoutWeight(prevWorkoutWeight);
setWorkoutReps(prevWorkoutReps);
setEditableWorkout('');
setIsEditing(!isEditing);
setActionCounter(actionCounter + 1);
}}
>
{workout.name} is coming from a firestore database, but I don't think that's related.
I don't think the variable workout gets updated when you call setWorkoutName, try replacing {workout.name} with workoutName or whatever variable name you used where you declared your useState function that created the setWorkoutName setter function, e.g.
const [workoutName, setWorkoutName] = useState(workout.name)
return (
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{/* should be `workoutName` here, not `workout.name` */ workoutName}
</TextInput>
)
SOLUTION
I needed to target the workout being edited with
editableWorkout == workout.id ? workoutName : workout.name} which let me differentiate between the workouts using Leon Si's answer.
I insert dropdown list component from extra file
"<Option_Gender />""import Option_Gender from "../components/OptionBar/Option_Gender";"
like this.
I only know to return value for TextInput:
<TextInput
placeholder = "Name:"
value = {name}
onChangeText = {(text) => setName(text)}
style = {styles.BlockStyle}
placeholderTextColor= 'grey'
/>
But I don't know how to return value for this optionbar...
I have tried to return value in the Option_Gender file directly but it seems will cause a conflict...
I can only solve it by directly copying the code in Option_Gender to this page...Hope to have it this way because it puts the option function in a separate file.
I need to verify that the text is less than 11 characters
how I did this?
(sorry about my english)
To check that the length of input text < 11 is pretty simple. You can do it like this:
<TextInput
onChangeText={(text) => {
if (text.length < 11) {
this.setState({text});
} else {
this.setState({errorMessage: 'Text input must be less than 11'});
}
}}
value={this.state.text}
/>
What you also need to consider is how you want to present this information to the user. (i.e. some sort of error message to notify them of this problem, so they know what is happening)
For reference, please consider reading the documentation: https://facebook.github.io/react-native/docs/textinput.html
React-native documentation is generally excellent. Just go through the Components list and read up on these things.
My code is similar to this example presented in the doc. However, I've noticed that the asyncValidate function receives undefined for any field specified in the asyncBlurFields array as soon as I unFocus from that field. However, it returns the right values when I submit the form or unFocus from a different field.
For example, if I have asyncBlurFields: ['username', 'firstname'] and there's a value in both fields, I'll see username as undefined in the values passed to asyncValidatewhen I unFocus from username but the value of firstname will be present. If I then unFocus from firstname, the value of firstname will now be undefined while that of username will be present. Both values will be present when I submit the form. It seems similar to the question raised in issue #1834. However, I don't understand the response given in that issue. Could someone please help me with an example or further explanation.
I'm using version 7.0.1 of redux-form and version 0.45.1 of react-native.
I've figured it out. Here's what my renderInput() now looks like. The important thing here is the line with onBlur=...
renderInput({
input,
label,
type,
meta: { asyncValidating, touched, error, active }
}) {
return (
<Item>
<Input
placeholder={label}
{...input}
type={type}
onBlur={() => input.onBlur(input.value)}
/>
</Item>
);
}
I simply want to call a function with the text of a TextInput once editing of the text is done. Something like below
<TextInput onSubmitEnding={(text) => submitText(text)}>
But obviously the text is not passed as argument to onSubmitEnding, . onChangeText has it. But I really want the text after the user is done editing. So whats the simplest means to do this,
1º onSubmitEnding is not a valid event, the correct one is onSubmitEditing.
2º You can get the input value using event.nativeEvent.text
Your code should look like this
<TextInput onSubmitEnding={(event) => this.submitText(event.nativeEvent.text)}>
I'm not forcing you to certain pattern, but you should have your TextInput's value in a state. Then:
...
this.state = {
textInputValue: ''
}
...
submitText() {
console.log(this.state.textInputValue)
}
...
<TextInput
value={this.state.textInputValue}
onChangeText={(text) => this.setState({textInputValue: text})}
onSubmitEditing={() => this.submitText()} />
is completely valid. Here's a live example: https://rnplay.org/apps/wirurQ