React Forms

Controlled Components

import React from 'react';

export default class FormPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            username: 'default_username',
            password: '',
            textarea: '',
            select: 'coconut'
        };

        // This binding is necessary to make `this` work in the callback
        this.onInputUsernameChange = this.onInputUsernameChange.bind(this);
        this.onInputPasswordChange = this.onInputPasswordChange.bind(this);
        this.onInputTextareaChange = this.onInputTextareaChange.bind(this);
        this.onInputSelectChange = this.onInputSelectChange.bind(this);
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onInputUsernameChange(event) {
        this.setState((prevState, prevProps) => {
            return { username: event.target.value.trim() };
        });
    }

    onInputPasswordChange(event) {
        this.setState((prevState, prevProps) => {
            return { password: event.target.value };
        });
    }

    onInputTextareaChange(event) {
        this.setState((prevState, prevProps) => {
            return { textarea: event.target.value };
        });
    }

    onInputSelectChange(event) {
        this.setState((prevState, prevProps) => {
            return { select: event.target.value };
        });
    }

    onFormSubmit(event) {
        event.preventDefault();
    }

    render() {
        return (
            <section className='form-page'>
                <h3>Form page</h3>

                <form onSubmit={this.onFormSubmit}>
                    <div className='fx-u-mb-3'>
                        <label className='fx-label'>Username with trimmed value (no spaces): [{this.state.username}]</label>
                        <input className='fx-input' type="text" 
                            value={this.state.username}
                            onChange={this.onInputUsernameChange} />
                    </div>

                    <div className='fx-u-mb-3'>
                        <label className='fx-label'>Password with minimum lenght value: [{this.state.password}]</label>
                        <input className='fx-input' type="password" 
                            value={this.state.password}
                            onChange={this.onInputPasswordChange} />
                        <div className='fx-u-color-danger'>
                            {this.state.password.length < 4 ? 'Password must be at least 4 characters' : ''}
                        </div>
                    </div>

                    <div className='fx-u-mb-3'>
                        <label className='fx-label'>Textarea:</label>
                        <textarea className='fx-textarea'
                            value={this.state.textarea}
                            onChange={this.onInputTextareaChange} />
                    </div>

                    <div className='fx-u-mb-3'>
                        <label className='fx-label'>Select: [{this.state.select}]</label>
                        <select className='fx-select'
                            value={this.state.select}
                            onChange={this.onInputSelectChange}>
                            <option value="pineapple">Pineapple</option>
                            <option value="orange">Orange</option>
                            <option value="coconut">Coconut</option>
                            <option value="mango">Mango</option>
                        </select>
                    </div>
                    

                </form>
            </section>
        );
    }
}

Leave a Comment