10. React 受控组件和非受控组件

最新推荐文章于 2024-08-03 09:28:46 发布

神奇洋葱头

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量113

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq28129019/article/details/115331177

版权

React 受控组件非受控组件 state ref

关键词由CSDN通过智能技术生成

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

文章目录

1. 非受控组件
2. 受控组件
3. 比较受控组件和非受控组件

1. 非受控组件

所有的输入类型的 dom元素（input textarea 单选多选）的值，只有在使用的时候才会取值，就是非受控组件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-非受控组件</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class Login extends React.Component{
        //1.绑定到类组件的实例上去，获取的是节点元素
        username = React.createRef();
        password = React.createRef();
        handleSubmit = (event)=>{
            //3. 获取节点的value属性值
            const username_value = this.username.current.value;
            const password_value = this.password.current.value;
            console.log(this.username.current);
            //阻止form表单默认提交
            event.preventDefault();
            alert("username="+username_value+"  password="+password_value);
        }
        
        render(){
            return (
                // 2.把ref所在节点元素绑定到类实例属性上去
                <form action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名：<input ref={this.username} type="text" name="username"/>&nbsp;
                    密码：<input ref={this.password} type="text" name="password"/>&nbsp;
                    <button>登录</button>
                </form>
            );
        }
    }
    //3.2 渲染组件到页面
    ReactDOM.render(<Login/>, document.getElementById("root"))
</script>
</body>
</html>

2. 受控组件

定义：输入类型的DOM（如 input textarea 单选多选等），随着用户的输入，就能把value值维护到state状态中去，并且在使用这些值的时候可以从state状态中取出来，这种就是受控组件
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-受控组件</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class Login extends React.Component{

        //初始化状态
        state = {
            username:"",
            password:""
        }

        //1.绑定到类组件的实例上去，获取的是节点元素
        handleSubmit = (event)=>{
            //3. 获取state的用户名和密码
            const {username,password} = this.state;
            alert("username="+username+"  ,password="+password);
            //阻止form表单默认提交
            event.preventDefault();

        }

        //保存用户名到state中
        getUsername = (event)=>{
            this.setState({
                username:event.target.value
            });
        }
        //保存密码到state中
        getPassword = (event)=>{
            this.setState({
                password:event.target.value
            });
        }

        render(){
            return (
                // 2.把ref所在节点元素绑定到类实例属性上去
                <form action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.getUsername} type="text" name="username"/>&nbsp;
                    密码：<input onChange={this.getPassword} type="text" name="password"/>&nbsp;
                    <button>登录</button>
                </form>
            );
        }
    }
    //3.2 渲染组件到页面
    ReactDOM.render(<Login/>, document.getElementById("root"))
</script>
</body>
</html>