React收集表单数据

马德里甜欣

已于 2022-03-22 00:47:30 修改

阅读量869

点赞数 1

文章标签： react.js javascript 开发语言

于 2022-03-22 00:21:54 首次发布

本文链接：https://blog.csdn.net/weixin_51564923/article/details/123650126

版权


<body>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component{
            state ={ //首先生命两个变量名
                username:"",
                password:""
            }
            saveUsername = (event)=>{
                    this.setState({
                        username:event.target.value  //变量改变
                    })
            }
            savePassword = (event)=>{
                this.setState({
                    password:event.target.value  //变量改变
                })
            }
            handleSubmit = (event)=>{ //表单提交时触发的事件
                event.preventDefault() //阻止默认事件
                console.log(`${this.state.username}------${this.state.password}`);//输出用户名和密码
            }
            clickButton = ()=>{
                this.setState({
                    username:"aaaa",
                    password:"aaaaaaa"  //点击表单外的事件时会触碰这个方法
                })
            }
            render(){ //渲染页面
                return(
                    <div>
                        <form onSubmit={this.handleSubmit}>
                        账号：<input type="text" onChange={this.saveUsername} />    
                        密码：<input type="text" onChange={this.savePassword} />    
                        <button>登录</button>
                        </form>
                        <button onClick={this.clickButton}>表单外button </button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>
</body>
</html>