react学习——12受控组件与非受控组件

最新推荐文章于 2024-07-13 20:22:07 发布

一叶飘零晋

最新推荐文章于 2024-07-13 20:22:07 发布

阅读量179

点赞数 2

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

本文链接：https://blog.csdn.net/ChenJin_2/article/details/139923972

版权

react 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_非受控组件.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        handleSubmit=(event)=>{
            event.preventDefault();//阻止表单提交
            const {username,password} = this;
            alert(`你输入的用户名是：${username.value}，密码是：${password.value}`)
        }
        render(){
            return(
                <form action="http://www.atguigu.com" 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(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

2、受控组件（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_受控组件.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写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();//阻止表单提交
            const {username,password} = this.state
            alert(`你输入的用户名是：${username}，密码是：${password}`)
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveUsername} ref={c=>this.username=c} type="text" name="username"/>
                    密码：<input onChange={this.savePassword} type="password" name="password"/>
                    <button>点击登录</button>
                </form>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>