React学习（从零基础到精通）00010000

原创于 2021-06-13 08:49:12 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 同时被 2 个专栏收录

26 篇文章

订阅专栏

react学习

25 篇文章

订阅专栏

这篇博客介绍了如何在 React 中使用非受控组件来收集表单数据。通过设置 ref 属性，可以在 handleSubmit 函数中获取到输入框的值，并在用户点击登录按钮时弹出警告框显示输入的用户名和密码。

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

react中收集表单数据

1.非受控组件

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