React中表单数据提交获取数据的几种写法

一、非受控组件

即：先用现取数据

class MyComponent extends React.Component {

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    用户名：<input ref={(e) => this.username = e} type='text' name='username' /><br />
                  密码：  <input ref={(e) => this.password = e} type='password' name='pwd' /><br />
                    <button>提交表单</button>
                </form>
            </div>
        )
    }

    handleSubmit = (e) => {
        //该方法阻止表单的提交
        e.preventDefault();
        const { username, password } = this;
        alert('用户名：'+username.value+'，密码：'+password.value)
        console.log(username);
        console.log(password);
    }
}

二、受控组件

即：随着输入将内容放置到状态里面，用的时候从状态里面取出来。

class MyComponent extends React.Component {

    //初始化状态
    state = {
        username: "",
        password: ""
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.handleUserName} type='text' name='username' /><br />
                  密码：  <input onChange={this.handlePassword} type='password' name='pwd' /><br />
                    <button>提交表单</button>
                </form>
            </div>
        )
    }
    //保存用户名
    handleUserName = (e) => {
        this.setState({
            username: e.target.value
        })
        console.log(e.target.value);
    }
    //保存密码
    handlePassword = (e) => {
        this.setState({
            password: e.target.value
        })
    }

    handleSubmit = (e) => {
        //该方法阻止表单的提交
        e.preventDefault();
        const { username, password } = this;
        alert('用户名：' + this.state.username + '，密码：' + this.state.password)
        console.log(username);
        console.log(password);
    }
}

优先使用受控组件，非受控组件使用过多ref会影响性能。

三、受控组件的优化——柯里化写法

将onChange函数的返回值合并为一个，返回onChange的监听函数，避免出现过多的回调函数

class MyComponent extends React.Component {

    //初始化状态
    state = {
        username: "",
        password: ""
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveFormData('username')} type='text' name='username' /><br />
                  密码：  <input onChange={this.saveFormData('password')} type='password' name='pwd' /><br />
                    <button>提交表单</button>
                </form>
            </div>
        )
    }

    //保存表单数据
    saveFormData = (type) => {
        //onChange接收一个返回值，调用saveFormData会返回一个函数，直接从saveFormData中拿取不到数据
        return (e) => {
            console.log(type, e.target.value);
            this.setState({
                [type]: e.target.value
            })
        }
    }

    handleSubmit = (e) => {
        //该方法阻止表单的提交
        e.preventDefault();
        const { username, password } = this;
        alert('用户名：' + this.state.username + '，密码：' + this.state.password)
        console.log(username);
        console.log(password);
    }
}

四、受控组件的优化——非柯里化写法

class MyComponent extends React.Component {

    //初始化状态
    state = {
        username: "",
        password: ""
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    {/* onChange需要一个函数，这里直接返回一个函数(e) => */}
                    用户名：<input onChange={(e) => this.saveFormData('username', e)} type='text' name='username' /><br />
                  密码：  <input onChange={(e) => this.saveFormData('password', e)} type='password' name='pwd' /><br />
                    <button>提交表单</button>
                </form>
            </div>
        )
    }

    //保存表单数据
    saveFormData = (type, e) => {
        console.log(type, e.target.value);
        this.setState({
            [type]: e.target.value
        })
    }

    handleSubmit = (e) => {
        //该方法阻止表单的提交
        e.preventDefault();
        const { username, password } = this;
        alert('用户名：' + this.state.username + '，密码：' + this.state.password)
        console.log(username);
        console.log(password);
    }
}