组件收集表单数据

理解
1) 问题: 在react应用中, 如何收集表单输入数据
2) 包含表单的组件分类
a. 受控组件: 表单项输入数据能自动收集成状态
b. 非受控组件: 需要时才手动读取表单输入框中的数据

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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/prop-types.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
      /*
        1. 问题: 在react应用中, 如何收集表单输入数据
        2. 包含表单的组件分类
            受控组件
            非受控组件
        */
        /*
        需求: 自定义包含表单的组件
            1. 界面如下所示
            2. 输入用户名密码后, 点击登陆提示输入信息
            3. 不提交表单
        */

     class LoginForm extends React.Component{
        constructor(props) {
            super(props)
            this.handleSubmit = this.handleSubmit.bind(this)
            this.handleChange = this.handleChange.bind(this)
            this.state={
                pwd:''
            }
        }



        handleSubmit(event) {

            //两种方式获取表单的值
            const username=this.nameInput.value
            const password=this.state.pwd
            alert(`准备提交的用户名为: ${username}, 密码:${password}`)

            // 阻止事件的默认行为: 提交表单
            event.preventDefault()
        }

        handleChange(event){
            this.setState({pwd: event.target.value})
        }

        render(){
            return (
                <form onSubmit={this.handleSubmit} action="/test">
                    <label>
                    用户名:
                        <input type="text" ref={input=>this.nameInput=input}/>
                    </label>&nbsp;
                    <label>
                        密码:
                        <input type="password" value={this.state.pwd} onChange={this.handleChange}/>
                    </label>&nbsp;
                    <input type="submit" value="登陆" />
                </form>
            )
        }
     }

    

     //渲染应用组件标签
     ReactDOM.render(<LoginForm/>,document.getElementById('example'))

</script>
</body>
</html>

 

posted @ 2020-03-19 17:40  技术小白丁  阅读(328)  评论(0)    收藏  举报