Redux-Form Field won't update with value of <input> inside it

I am trying to design a type-able input component in React, which is wrapped inside a Redux-Form Field. But the value of the Field doesn't update when the value of the HTML <input> tag changes.

Field

Field

<input>

The Field is defined as:

Field

<Field
name="inputTextBox"
type="text"
component=CustomInputComponent
</Field>


And the CustomInputComponent is defined as:

CustomInputComponent

class CustomInputComponent extends Component {

constructor() {
super();
this.state=
value: undefined
;

/* updates the state of CustomInputComponent with the current value typed inside <input> */
setInputValueText = (value) =>
this.setState(
...this.state,
value
)
;

render()
return (
<input type="text" value=this.state.value onInput=event => this.setInputValueText(event.target.value) />
)




Whenever the <input> tag is typed into, the state of the CustomInputComponent changes successfully, but the value of the Field above that contains CustomInputComponent doesn't change. I am trying to access the value of the Field through:

<input>

CustomInputComponent

Field

CustomInputComponent

Field

const selector = formValueSelector('myForm')
let currentInput = selector(state, 'inputTextBox')


I want currentInput to contain the current value typed inside input. What could I be missing?

currentInput

input

1 Answer
1

Several ways to do it:

https://codesandbox.io/s/z3xnjv4w7m (passing Redux Field data/methods to child)
https://codesandbox.io/s/m4x7z7o429 (controlling Redux Fields through React state)

InputForm.js

import React, Component from "react";
import Form, Field, reduxForm from "redux-form";
import CustomInputComponent from "./customInputComponent";

const isRequired = value => (!value ? "Required" : undefined);

class InputForm extends Component
handleFormSubmit = ( inputTextBox ) =>
alert(`Value of custom input: $inputTextBox`);

render = () => (
<div style= height: 300, width: 500 >
<h1 style= textAlign: "center" >Input Form</h1>
<hr />
<Form onSubmit=this.props.handleSubmit(this.handleFormSubmit)>
<div style= height: 70 >
<Field
className="uk-input"
component=CustomInputComponent
name="inputTextBox"
type="text"
placeholder="Write something..."
validate=[isRequired]
/>
</div>
<button
type="submit"
className="uk-button uk-button-primary uk-button-large"
disabled=this.props.submitting
>
Submit
</button>
<button
type="button"
className="uk-button uk-button-default uk-button-large"
disabled= this.props.submitting
onClick=this.props.reset
style= float: "right"
>
Clear
</button>
</Form>
</div>
);


export default reduxForm( form: "InputForm" )(InputForm);


customInputField.js

import React, Fragment from "react";

export default (
children,
input,
meta: invalid, touched, error ,
...props
) => (
<Fragment>
<input ...input ...props />
touched && error && <div style= color: "red" >error</div>
</Fragment>


At bare minimum, Redux Field's input.onChange method and input.value needs to be passed from parent to child.

input.onChange

input.value

Parent

<Field
component=CustomInputComponent
name="inputTextBox"
/>


Child

export default ( input: onChange, value ) => (
<input
type="text"
placeholder="Write something..."
className="uk-input"
onChange=onChange
value=value
/>
);


ControlledInputForm.js

import React, Component from "react";
import Form, Field, reduxForm, change from "redux-form";
import CustomInputComponent from "./customInputComponent";

const isRequired = value => (!value ? "Required" : undefined);

class ControlledInputForm extends Component
state = value: "" ;

handleFormSubmit = ( inputTextBox ) =>
alert(`Value of custom input: $inputTextBox`);

handleChange = e =>
this.setState( value: e.target.value , () =>
this.props.change("inputTextBox", this.state.value);
);
;

resetForm = () => this.setState( value: "" , () => this.props.reset());

render = () => (
<div style= height: 300, width: 500 >
<h1 style= textAlign: "center" >Controlled Input Form</h1>
<hr />
<Form onSubmit=this.props.handleSubmit(this.handleFormSubmit)>
<div style= height: 70 >
<Field
className="uk-input"
component=CustomInputComponent
name="inputTextBox"
placeholder="Write something..."
type="text"
handleChange=this.handleChange
controlledValue=this.state.value
validate=[isRequired]
/>
</div>
<button
type="submit"
className="uk-button uk-button-primary uk-button-large"
disabled=this.props.submitting
>
Submit
</button>
<button
type="button"
className="uk-button uk-button-default uk-button-large"
disabled= this.props.submitting
onClick=this.resetForm
style= float: "right"
>
Clear
</button>
</Form>
</div>
);


export default reduxForm(
form: "ControlledInputForm",
fields: ["inputTextBox"]
)(ControlledInputForm);


customInputComponent.js

import React, Fragment from "react";

export default (
meta: invalid, touched, error ,
handleChange,
controlledValue,
...props
) => (
<Fragment>
<input ...props value=controlledValue onChange=handleChange />
touched && error && <div style= color: "red" >error</div>
</Fragment>
);


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.