07_react中收集表单的数据

最新推荐文章于 2023-03-25 15:11:24 发布

又菜又爱玩代码

最新推荐文章于 2023-03-25 15:11:24 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/qq_46431018/article/details/126162466

版权

React 受控组件非受控组件表单处理 state管理

关键词由CSDN通过智能技术生成

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.受控组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">

        class Login extends React.Component {
            // username = React.createRef()
            // password = React.createRef()

            //初始化状态
            state = {
                username: '',
                password: ''
            }
            //表单提交
            handleSubmit = () => {
                event.preventDefault()
                const { username, password } = this.state
                alert(`你输入的用户名是：${username}密码是：${password}`)
            }

            //保存用户名到状态中
            saveUsername = () => {
                console.log("@", event.target.value)
                this.setState({
                    username: event.target.value
                })
            }

            //保存密码到状态中
            savePassword = () => {
                this.setState({
                    password: event.target.value
                })
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名： <input onChange={this.saveUsername} type="text" name="username" />&nbsp;
                        密码：<input onChange={this.savePassword} type="password" name="password" />&nbsp;
                        <button >登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("test"))
    </script>
</body>

</html>

2.非受控组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component {
            handSubmit = (/* event */) => {
                event.preventDefault()//阻止表单提交
                const{username,password} =this
                alert(`你输入的用户名是：${username.value}，你输入的密码是：${password.value}`)
            }

            render() {
                return (
                    <form action="https://baidu.com" onSubmit={this.handSubmit}>
                        <div>
                            用户名： <input ref={(currentNode) => { this.username = currentNode }} type="text" name="username" />&nbsp;
                            密码： <input ref={currentNode => this.password = currentNode} type="password" name="password" />&nbsp;
                            <button>登录</button>
                        </div>
                    </form>

                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("test"))
    </script>
</body>

</html>