react表单

更改表单值

this.setState({
    [e.target.name]: e.target.value
})

import React,{Component} from "react";

import classNames from "classnames";

export default class SignupForm extends Component{

    constructor() {
        super();
        this.state = {
            username: '',
            email: '',
            errors: {}
        }
    }

    changeHandler = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit = (e) => {
        e.preventDefault()
        api.register(this.state).then(res => {
            console.log('b',res);
            this.setState({
                errors: res.data
            })
        })
    }

    render() {
        const {username, email, password, passwordConfirmation, errors} = this.state
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label className="control-label">用户名</label>
                        <input
                            className={classNames('form-control', {
                               'is_valid': errors.username
                            })}
                            onChange={this.changeHandler} value={username} type="text"  name="username"/>
                    </div>
                    <div className="form-group">
                        <label className="control-label">邮箱</label>
                        <input onChange={this.changeHandler}  className="form-control" type="text" name="email"/>
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        )
    }
}