2

I am following the ReactJS tutorial on the official site and I am curious about a design choice. Basically the tutorial said we need to have a handleChange function on every input's onChange.

handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
},

<input
    type="text"
    placeholder="Your name"
    value={this.state.author}
    onChange={this.handleAuthorChange}
/>

Does it mean if I have a form that has 10 text inputs and 3 checkbox inputs every single one of them needs to have a "handleChange" function?

What is the best practices of handling this situation?

Improve this question
0

2 Answers 2

Reset to default
2

It is a recommended way to use controlled components, which is handling all the inputs with an onChange() handler. But, you don't need to handle the in a different handler for each, you can handle all the onChange() with on handler but, identify the target uniquely and set the value to the state.

See the fiddle for an example https://jsfiddle.net/Pranesh456/ga2csaty/4/

In this example, I've used a common onChange() handler but I uniquely identified each input box with their id and populated the state based on the id which is been served as the value for the input boxes.

For more reference check React's controlled components

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yeah I figured there is an easier way by using a "general" function to handle all onChange callbacks but does your function takes into account checkbox/radio inputs too?
@StevenLee Yes. Anything with the id. But, for the checkbox the implementation should will be different.
@StevenLee Updated the fiddle with checkbox and radio buttons. Please check
0

Not really, you can just remove value={this.state.author} and onChange={this.handleAuthorChange} from the code and it will still work. If you want to refer your input when you are submitting a form, I'd use ref feature in React. It is a way to create a reference to the input for later use.

handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
},

<input
    type="text"
    placeholder="Your name"
    ref={(c) => this.yourNameField = c}
/>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.