react中收集表单数据的两种写法

种草小妖儿.

已于 2023-06-19 15:23:36 修改

阅读量130

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2023-06-19 15:22:48 首次发布

本文链接：https://blog.csdn.net/S2763427717/article/details/131288107

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

非受控组件写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非受控组件</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <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 = {currentNode => this.username = currentNode} type="text" name="username"/><br/>
                        密码：<input ref = {currentNode => this.password = currentNode} type="password" name="password"/><br/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById("test"))
    </script>

</body>
</html>

受控组件写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Login extends React.Component{
            state = {
                username:'',
                password:''
            }

            // 保存username到状态
            saveUsername = (event)=>{
                this.setState({username:event.target.value})
            }
            // 保存password到状态
            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"/><br/>
                        密码：<input onChange = {this.savePassword} type="password"/><br/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById("test"))
    </script>

</body>
</html>