React技术栈-组件的收集表单数据

　　　　　　　　　　　　　　React技术栈-组件的收集表单数据

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.表单的组件分类

　　在React应用中,表单的组件收集输入数据，React包含表单的组件分类如下:
　　　　受控组件: 
　　　　　　表单项输入数据能自动收集成状态
　　　　非受控组件: 
　　　　　　需要时才手动读取表单输入框中的数据

二.组件的收集表单数据案例

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件的收集表单数据</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    
    <!--导入 React的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--导入提供操作DOM的react扩展库-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--导入解析JSX语法代码转为纯JS语法代码的库-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--导入解析解析props属性的库-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel">
        
        //1>.定义组件
        class LoginForm extends React.Component{
            
            constructor(props){
                super(props)
                
                //绑定this
                this.handleSubmit = this.handleSubmit.bind(this)
                this.handleChange = this.handleChange.bind(this)
                
                //初始化状态
                this.state = {
                    pwd:""
                }
            }
            
            handleSubmit (event) {
                //阻止事件的默认行为(默认行为是自动提交form表单内容)
                event.preventDefault();
                const name = this.nameInput.value;
                const {pwd} = this.state;
                
                alert(`准备提交的用户名为:${name},密码为:${pwd}`)
                
                
                
            }
            
            handleChange (event){
                //读取输入的值
                const pwd = event.target.value;
                //更新pwd的状态
                this.setState({pwd})
            }
 
            render(){
                return (
                    <form action="/test" onSubmit={this.handleSubmit}>
                        用户名:<input type="text"  ref={input => this.nameInput = input}/>
                        密    码:<input type="password" value={this.state.pwd} onChange={this.handleChange}/>
                        <input type="submit" value="登录" />
                    </form>
                )
            }
        }
        
        //2>.渲染组件标签
        ReactDOM.render(<LoginForm />,document.getElementById("box1"))
        
    </script>
</html>

2>.浏览器打开以上代码渲染结果