I am having the next trouble, I have the next textinput
<TextInput
style={styles.inputs}
placeholder="Nombre"
placeholderTextColor={theme.SECONDARY_TEXT_COLOR}
underlineColorAndroid="transparent"
autoCorrect={false}
autoCompleteType="off"
autoCapitalize="characters"
onBlur={(() => setvName(values.fName), handleBlur('fName'))}
value={values.fName}
/>
as you can see i have 2 functions on onblur, the thing is that it works great when i dont have handleBlur('fName') on it, but i need both of them for my formik validation, how can i make it work?
Use like this to call multiple function.
onBlur={() => {
setvName(values.fName);
handleBlur('fName');
}}
Related
I don't know how to access the value of the input, I've searched all over https://mui.com/material-ui/react-text-field/ and haven't found an answer. Here is my TextField `
<TextField
id="outlined-search"
label="Поиск по названию"
variant="outlined"
onInput={console.log('Input FIRE')}
/>
onInput doesn't work yet.
I don’t remember what I tried, my ass is on fire.
Please check this event, it could be helpful
onInput={e => console.log('Input FIRE>>', e)}
you can try to check this one e.target.value or something different.
I am currently working on a react project. I am using react-final-form for fetching the data in the form. As I am using the material UI component to create the form I am creating the form somewhat like this.
Code
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, values }) => (
<form onSubmit={handleSubmit}>
<FormControl variant="outlined" className={classes.formControl} key={fieldKey}>
<Field
name={field.fieldName}
render={({ input }) => (
<TextField
{...input}
className={classes.textField}
variant="outlined"
label={props.field.label}
placeholder={props.field.description}
required={props.field.isMandatory}
InputLabelProps={{
shrink: true,
}}
/>
)}
type="text"
/>
</FormControl>
</form>
)}
/>
Now as soon as I remove the input props from the render props it is working fine. but with the input props, it delays in taking input. Without input props, I could not fetch the value from the form.
Is there any way to resolve this time delay?
Thanks in advance.
If you want a simple field. Maybe you can pass on only essential props.
<TextField
name={input.name}
value={input.value}
onChange={input.onChange}
/>
The solution to this is subscriptions.
The form is initially rendered on every action, react-final-form allows to handle subscription,
<Form subscription={{handeleSubmit: true}} ...> </Form>
We can do somewhat like this
There is a video link for this. Video
Hope you find this helpful 😉
In ReactNative onChangeText is working but ReactJs seems to be not working there
Is there any solution for that?
<input onChangeText={(text) => this.setState({text})} />
<h1>Hi {this.state.text}</h1>
There is no prop onChangeText for input (unless you rewrote it).
Also the default input for the function will be event.
Maybe this will work better for you:
<input onChange={event => this.setState({text: event.target.value})}
I have a <TextInput/> react native component here. When I begin typing in it, I see the predictions box above the keyboard. I don't want this to show up, how can I get rid of this?
https://facebook.github.io/react-native/docs/textinput.html
<TextInput
placeholder="email"
autoCapitalize="none"
keyboardType="email-address"
placeholderTextColor="white"
style={styles.input}
onChangeText={email => this.setState({ email })}
value={this.state.email}
/>
Try Using <TextInput autoCorrect={false} /> for disabling suggestions.
I want to autofocus first redux field. I have tried many different options available but none of them worked. So whenever the form gets created, it should focus to first field.
<Field
name={'Email'}
label="Email *"
onFocusCb={this.hideDoneButton}
component={FormInput}
containerStyle={styles.inputStyle}
clearButtonMode={'always'}
autoCorrect={false}
/>
I have created the component{FormInput} outside the class. Below is the code for the same.
const FormInput = props =>
(<View style={props.containerStyle}>
<FormTextInput
autoFocus={true}
multiline
style={props.style}
autoCapitalize={props.autoCapitalize}
clearButtonMode={props.clearButtonMode}
selectionColor={props.selectionColor}
value={props.input.value}
onFocus={props.onFocusCb}
keyboardType={props.keyboardType}
label={props.label}
placeholder={props.placeholder}
defaultValue={props.defaultValue}
onChangeText={text => props.input.onChange(text)}
onEndEditing={() => {
if (props.onEndEditing) {
props.onEndEditing();
}
if (props.input.onEndEditing) {
props.input.onEndEditing();
}
}}
/>
</View>);
You could use the HTML5 attribute autoFocus. This solution is not related to Redux form.
<Field
autoFocus
name={'Email'}
label="Email *"
onFocusCb={this.hideDoneButton}
component={FormInput}
containerStyle={styles.inputStyle}
clearButtonMode={'always'}
autoCorrect={false}
/>
There are ways to do it within Redux-form, like setting the props ref, withRef, use getRenderedComponent() and then calling .focus(), but for this simple behavior it's not clear what the benefit, over just using autoFocus, would be.