React中收集表单数据

最新推荐文章于 2024-11-18 18:03:26 发布

er2025166

最新推荐文章于 2024-11-18 18:03:26 发布

阅读量105

点赞数

文章标签： react.js javascript node.js

本文链接：https://blog.csdn.net/er2025166/article/details/119916258

版权

本文介绍了React中处理表单数据的两种方式：非受控组件，允许直接操作DOM获取数据；以及受控组件，通过state管理数据，确保数据流动的可控性。

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

1.非受控组件

就是数据实拿实用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Dome extends React.Component{
            //表单提交的回调
            handleSubmit = (event)=> {
                event.preventDefault()//组织表单提交
                const {admin,pwd} = this
                alert(`您的账号是：${admin.value}，你的密码是${pwd.value}`)
            }

            render(){
                return(
                    <form action="#" onSubmit={this.handleSubmit}>
                            用户名：<input ref={c => this.admin = c} type="text" name='admin' />
                            密  码：<input ref={c => this.pwd = c}  type="password" name='pwd' />
                            <button type='submit'>提交</button>
                    </form>
                )
            }
       }
       //渲染组件
       ReactDOM.render(<Dome/>,document.getElementById('text'))
    </script>
</body>
</html>

1受控组件

把数据放到state中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Dome extends React.Component{
            //初始化状态
            state = {admin:'',pwd:''}
           
            saveFormDate = (dataType)=>{
                return (event)=>{
                    this.setState({[dataType] : event.target.value})
                }
            }

            //表单提交的回调
            handleSubmit = (event)=>{
                event.preventDefault()//组织表单提交
                const {admin,pwd} = this.state
                alert(`你的账号是：${admin}，你的密码是${pwd}`)
            }

            render(){
                return(
                    <form action="#" onSubmit={this.handleSubmit}>
                            用户名：<input onChange={this.saveFormDate('admin')} type="text" name='admin' />
                            密  码：<input onChange={this.saveFormDate('pwd')} type="password" name='pwd' />
                            <button type='submit'>提交</button>
                    </form>
                )
            }
       }
       //渲染组件
       ReactDOM.render(<Dome/>,document.getElementById('text'))
    </script>
</body>
</html>