Correct way to take input values in React.js

Question

I am new to react and i am wondering if this is the correct way (somewhat quallity code) to get values from input forms. import React from 'react';

class Form extends React.Component {
    constructor() {
        super();
        this.state = {
            nameValue: '',
            ageValue: ''
        }
    }
    onChangeName(event) {
        this.setState({
            nameValue:event.target.value
        });

    }
    onChangeAge(event) {
        this.setState({
            ageValue: event.target.value
        });
    }
    showValue(){
        alert('name '+ this.state.nameValue + ' age: ' + this.state.ageValue)
    }
    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" onChange={this.onChangeName.bind(this)}/>
                </label>
                <label>Age:
                    <input type="text" onChange={this.onChangeAge.bind(this)}/>
                </label>
                <input type="submit" value="Submit" onClick={this.showValue.bind(this)}/>
            </form>

        );
    }
}
export default Form;

I mean i heared that the way it's done in react is so that every component should be somewhat independant and have it's own behaviour. Btw the code works just asking for the qualiity cause i have project in from of me. Or should i just add an event to the button and make the other componenents stateless, i.e the 2 input fields

Mayank Shukla · Accepted Answer · 2017-06-16T10:19:56.180

Yes, this is the correct way.

Suggestions:

1. Instead of using two different change function, you can handle all the input elements change by a single change function. For that assign the name (same as state variable name) property with input element, and inside change function access that state variable name by event.target.name and update that.

Run this snippet:

class Form extends React.Component {
    constructor() {
        super();
        this.state = {
            nameValue: '',
            ageValue: ''
        }
        this.commonChange = this.commonChange.bind(this);
        this.showValue = this.showValue.bind(this);
    }

    commonChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    showValue(){
        event.preventDefault();
        alert('name '+ this.state.nameValue + ' age: ' + this.state.ageValue)
    }

    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" name="nameValue" onChange={this.commonChange}/>
                </label>
                <label>Age:
                    <input type="text" name="ageValue" onChange={this.commonChange}/>
                </label>
                <input type="submit" value="Submit" onClick={this.showValue}/>
            </form>

        );
    }
}

ReactDOM.render(<Form/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

2. You are not controlling the input elements by state values (not using the value property of input elements), just storing the values in state, to get those value during submit call. So storing the values in state variable is not required, you can use uncontrolled component, and use ref to get the values.

Define the ref like this:

<input type="text" ref={el => this.nameValue} />

And access the value by this.nameValue.value

Run this snippet:

class Form extends React.Component {
    constructor() {
        super();
        this.showValue = this.showValue.bind(this);
    }

    showValue(){
        alert('name '+ this.nameValue.value + ' age: ' + this.ageValue.value)
    }

    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" ref={el => this.nameValue=el} />
                </label>
                <label>Age:
                    <input type="text" ref={el => this.ageValue=el} />
                </label>
                <input type="submit" value="Submit" onClick={this.showValue}/>
            </form>

        );
    }
}

ReactDOM.render(<Form/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

3. Always define binding of the functions in the constructor.

Check this answer for more details: why do you need to bind a function in a constructor

Correct way to take input values in React.js

1 Answers1