react中收集表单数据

最新推荐文章于 2024-05-14 14:35:02 发布

余生tt

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量532

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63135041/article/details/129935011

版权

文章通过案例对比介绍了React中的非受控组件和受控组件。非受控组件的值由DOM维护，需用ref获取；受控组件的状态由React管理，onChange事件更新state。

摘要由CSDN通过智能技术生成

一、非受控组件

1.1案列：

<script type="text/babel">
      //创建组件
      class Login extends React.Component{

        handleSubmit = (event)=>{
           event.preventDefault() //阻止表单提交
           const {username,password}=this
           alert(`用户名:${username.value},密码:${password.value}`)
           
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                 用户名：<input ref={c => this.username = c }  type="text" name="username"/>
                 密码：<input ref={c => this.password = c } type="password" name="password"/>
                 <button>登录</button>
                </form>
            )
        }
      }
      //渲染组件
      ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

1.2总结：
React中的非受控组件是指那些表单元素（如input、textarea等）不受React状态管理的组件。它们的值由DOM本身维护，而不是被React所控制。因此，在使用非受控组件时，需要通过ref来获取其当前值。
如上案列：表单提交是直接从input标签获取数据提交。

二、受控组件

2.1案列：

<script type="text/babel">
      //创建组件
      class Login extends React.Component{
        //初始化状态
        state={
          username:'',//用户名
          password:''//密码
        }

        handleSubmit = (event)=>{
          event.preventDefault() //阻止表单提交
          console.log(this.state.username);
        
        }
        //保存用户名到状态中
        saveUsername = (event)=>{
          this.setState({username:event.target.value})
        }
        //保存密码到状态中
        savePassword = (event)=>{
          this.setState({password:event.target.value})
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                 用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                 密码：<input onChange={this.savePassword} type="password" name="password"/>
                 <button>登录</button>
                </form>
            )
        }
      }
      //渲染组件
      ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

2.2总结：
React中的受控组件是指其状态（state）被React管理的表单元素，例如input、textarea和select等。当用户与受控组件交互时，其值必须通过onChange事件处理程序更新组件的state，并且每次渲染时必须将组件的值设置为state中的当前值。这样，React就可以有效地控制表单元素的值和行为。
如上案列：我们把用户名(username)和密码(password)先存到状态(state)中,再阻止表单默让的提交，通过我们手动提交
个人博客：余生的学习笔记