React学习（六）事件处理，收集表单数据

qq_52551375

于 2024-01-27 11:03:34 发布

阅读量226

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_52551375/article/details/135853178

本文详细介绍了在React中如何通过事件处理函数处理用户输入，包括使用事件委托和区分非受控与受控组件来收集表单数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.事件处理

<!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= 'test'></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.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建
        class Demo extends React.Component {
            /* (1)通过onXxx属性指定事件处理函数(注意大小写)
                a.React使用的是自定义(合成)事件，而不是使用的原生DOM事件-->为了更好的兼容性
                b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)-->为了高效
                (2)通过event.target得到发生事件的DOM元素对象-->不要过度使用ref
                // 发生事件的元素正好是需要操作的元素就可以不使用refs，使用event.target.value
            */
            // 创建ref容器
            myRef = React.createRef()
            myRef2 = React.createRef()
            // 展示左侧输入框的数据
            showData = ()=>{
                alert(this.myRef.current.value)
            }
            showData2 = (event)=>{
                alert(event.target.value)
            }
            render(){
                return (
                    <div >
                        <input ref={this.myRef} type = "text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="button100" type="button" onClick={this.showData}>点击按钮提示左侧数据</button>&nbsp;
                        <input  type = "text" placeholder="失去焦点提示数据" onBlur={this.showData2 }/>&nbsp;
                    </div>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

二.收集表单数据

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= 'test'></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.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        // 非受控组件：页面中所有输入类DOM，现用现取
        class Login extends React.Component {
            handleSubmit=(event)=>{
                event.preventDefault()
                const{username,password} =this
                alert(`用户名为${username.value}，密码为${password.value}`)
            }
            render(){
                return (
                    <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                        用户名：<input ref={c=>this.username=c} type = "text" name = "username" placeholder="请输入用户名"/>&nbsp;
                        密码：<input ref={c=>this.password=c} type = "password" name = "password" placeholder="请输入密码" />&nbsp;
                        <button >登录</button>&nbsp;
                    </form>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>
</html>

2.受控组件

1.输入类的DOM都能绑定onChange
2.随着你的输入，会将输入内容维护到状态中，需要使用时将内容从状态中取出来

<!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= 'test'></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.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        // 受控组件：页面中所有输入类DOM，随着你的输入，会将输入内容维护到状态中，需要使用时将内容从状态中取出来
        class Login extends React.Component {
            // 初始化状态
            state={
                username:'',//用户名
                password:''//密码
            }
            // 通过event.target得到发生事件的DOM元素对象,发生事件的元素正好是需要操作的元素就可以不使用refs，使用event.target.value
            saveUsername=(event)=>{
                // console.log(event.target.value)
                // 将用户名存入状态中
                this.setState({username:event.target.value})

            }
            // 将密码存入状态中
            savePassword=(event)=>{
                this.setState({password:event.target.value})
            }
            // 表单提交的回调
            handleSubmit=(event)=>{
                event.preventDefault()
                const {username,password} = this.state
                alert(`用户名为${username}，密码为${password}`)
            }
            render(){
                return (
                    <form  onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveUsername} type = "text" name = "username" placeholder="请输入用户名"/>&nbsp;
                        
                        密码：<input onChange={this.savePassword} type = "password" name = "password" placeholder="请输入密码" />&nbsp;
                        <button >登录</button>&nbsp;
                    </form>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>
</html>