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

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

小智大愚

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

阅读量368

点赞数

分类专栏： web 前端 react 文章标签： react

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/107763372

版权

web 前端同时被 2 个专栏收录

90 篇文章 1 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

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

两种方式

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

案例

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

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

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

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}/>&nbsp;&nbsp;
                    密码: <input type="password" value={this.state.pwd} onChange={this.handleChange}/>&nbsp;&nbsp;
                    <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 两类组件有关系，了解是怎么回事就行了，具体多么深奥，我还没研究

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

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

小智大愚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 初探 [四] React 组件收集表单数据的两种方式

收集表单数据这项工作在前端的项目中是非常常见的，我们知道vue 中有 v-model 实现了双向数据绑定，那么React 中是怎么样的情况，这边文章来探讨一下。功能学习以需求驱动比较快，那么来看一个和收集React 表单数据相关的小案例，效果如下：功能本身很简单，主要是为了了解 React 中组件收集数据的方式。根据需求可分析我们所要的操作为获取输入框中用户名和密码阻止表单的默认提交行React 代码实现如下：<!DOCTYPE html><..
复制链接

扫一扫