React 初探 [四] React 组件收集表单数据的两种方式

系统管理员 2023-03-04 10:29 102阅读 0赞

> 收集表单数据这项工作在前端的项目中是非常常见的，我们知道vue 中 有 v-model 实现了双向数据绑定，那么React 中是怎么样的情况，这边文章来探讨一下。

### 两种方式 ###

1.  **通过ref 属性获取表单数据**
2.  **通过onChange 事件监听处理**

### 案例 ###

功能学习以需求驱动比较快，那么来看一个和收集React 表单数据相关的小案例，效果如下：

![20200803145342128.PNG][]

功能本身很简单 ，主要是为了了解 React 中 组件收集数据的方式。根据需求可分析我们所要的操作为

1.  获取输入框中 用户名 和 密码
2.  阻止表单的默认提交行

React 代码实现如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>组件如何收集表单数据</title>
    </head>
    
    <body>
        <div id="example"></div>
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    
        <script type="text/babel">
            /*
        需求：自定义包含表单的组件
        界面如下所示
        1、输入用户密码后,点击登录 提示输入信息
        2、不提交表单
        */
    
        class LoginForm extends React.Component{
            constructor(props){
                super(props)
                // 初始化状态
                this.state ={
                    pwd:''
                }
                this.handleSubmit = this.handleSubmit.bind(this)
                this.handleChange = this.handleChange.bind(this)
            }
            handleSubmit(e){
                // 不让表单提交
                e.preventDefault()
    
                //读取输入框数据 
              const nameValue =   this.nameInput.value.trim()
              alert(`准备提交的用户名为${nameValue},密码为${this.state.pwd}`)
    
            }
            handleChange(e){
                // 读取当前输入框的值 并更新 pwd 状态
                const pwd = e.target.value
                this.setState({pwd}) // 赋值有用到解构
            }
            render(){
                return (
                    <form action="/test" onSubmit={this.handleSubmit}>
                        用户名: <input type="text" ref={input =>this.nameInput = input}/>  
                        密码: <input type="password" value={this.state.pwd} onChange={this.handleChange}/>  
                        <input type="submit" value="登录"/>
                    </form>
                )
            }
        }
    
        ReactDOM.render(<LoginForm/>,document.getElementById('example'))
        </script>
    </body>
    
    </html>

如上代码中，用户名和密码是通过两种不同的方式实现的，一种是refs 标识控件 然后获取控件在获取value；另外一种是监听输入框的onChange 事件 ，React 中 onChange 事件是只要input 输入内容有改变就触发，不是只在失去焦点时。第二种onChange 的监听，绑定的数据是维护在state 中，输入内容改变后调用onChange,获取内容设置给 state 。

### 补充 ###

其实以上两种实现和React 两类组件有关系，了解是怎么回事就行了，具体多么深奥，我还没研究

*  受控组件： 表单项输入数据能自动收集成状态
 *  非受控组件：需要时才手动读取表单输入框中的数据。

根据需求及描述，应该能基本了解 组件收集表单数据的方式了，记录博客为了督促自己学习，每一项技能的学习，如果很快能应用到项目中那是极好的，如果不能，当做笔记记录下来也是一个不错的选择，毕竟 好记性不如烂笔头。

[20200803145342128.PNG]: /images/20230208/0bd0ede177e74b4c9fd8be0195319fb2.png