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

Posted 2022-04-12 一杯清泉

一、非受控组件

即：先用现取数据

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);