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})}
Related
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 😉
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');
}}
I'm trying to hook up Material UI TextField with an input component of my own. The code utilizing the TextField looks like this:
<Autocomplete
id="inputData"
options={inputData}
getOptionLabel={option => option.text}
renderInput={params => (
<TextField
{...params}
label="inputData"
InputProps={{
inputComponent: () => <Input name="inputData" />
}}
/>
)}
/>
and the Input component code is simple:
const Input = () => <input />
It will become more complicated but for now I'd like to get this simple code to work. The error I get is that inputRef.current is null which is probably caused by the lack of InputElement interface implementation in the Input component. Please see the Material UI docs below the code snippet for the info on InputElement interface. In other words my Input component doesn't handle the inputRef prop Material UI needs.
How do I properly integrate a custom Input component with Material UI TextField ?
Here's a Sandbox: https://codesandbox.io/s/fervent-bash-pxqq0.
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.
React toolbox seem to require I use state for its input values http://react-toolbox.com/#/components/input. How can I map my redux props to state for use with react-toolbox?
<Input type='text'
label='Name'
name='name'
value={this.state.name}
onChange={this.handleChange.bind(this, 'name')} />
I think if I set it in constructor when redux state changes, it will not update my state?
You need to map redux states to component props.
const mapStateToProps = state => ({
inputBoxValue: state.myReduer.inputBoxValue,
});
Then we can bind the props to the component using
export default connect(mapStateToProps)(myComponent);
And we can use It in our component like regular props.
<Input type='text'
label='Name'
name='name'
value={this.props.name}
onChange={this.handleChange.bind(this, 'name')} />
Redux doc: https://github.com/reactjs/react-redux/blob/master/docs/api.md
Please let me know If I'm missing something?