React入门必备 [第二关] React面向组件编程之受控组件与非受控组件

Queen_sy

已于 2023-08-04 12:23:24 修改

阅读量161

点赞数

文章标签： react.js 前端 javascript

于 2023-08-04 12:22:38 首次发布

本文链接：https://blog.csdn.net/Queen_sy/article/details/132099371

版权

文章介绍了React中受控组件（使用state管理输入值）和非受控组件（现用现取值）的区别，强调了onChange事件在受控组件中的应用以及如何通过ref获取非受控组件的值。

摘要由CSDN通过智能技术生成

1 受控组件（推荐使用）

2 非受控组件现用现取

需求：定义一个包含表单的组件

输入密码用户名之后，点击登录提示输入信息

1 受控组件（推荐使用）

页面类所有输入类的dom，随着输入把东西维护到状态中，需要用的时候把状态取出来，相当于使用onChange双向数据绑定

受控制组件，就是使用事件和state,输入类的组件，就是将内容绑定到state中的，在使用的时候使用state里面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>受控组件</title>
</head>
<body>
    <div id = "div">

    </div>

</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js"></script>

<!--引入对于组件标签的限制-->
<script src="../React-js/prop-types.js"></script>

<script type="text/babel">

/*
    受控制组件，就是使用事件和statem,输入类的组件，就是将内容绑定到state中的，在使用的时候使用state里面的   
*/

    class Login extends React.Component{
        // 初始化状态
        state = {
            name:"",
            pwd:"",
        };

       login = (event) =>{
            event.preventDefault(); //阻止表单提交
           const {name,pwd}=this.state
           // alert(username.value)错误原因：本身就是值
           alert(`输入的用户名是：${name},密码是：${password.pwd}`)
        }

        saveName = (event) =>{
            this.setState({name:event.target.value});
        }

        savePwd = (event) => {
            this.setState({pwd:event.target.value});
        }

        render() {
            return (
                <form action="http://www.baidu.com" onSubmit={this.login}>
                    用户名：<input onChange={this.saveName} type = "text" name ="username"/>
                    密码<input onChange={this.savePwd} type = "password" name ="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login />,document.getElementById("div"));
</script>
</html>

给输入框绑定的onChange，要拿到用户名密码，所以可以用event.target.value的形式获取

HTML中的onChange：当我们在绑定的input中输入内容时并不会触发onChange事件，只有当鼠标离开的时候才会触发。

React中的onChange：在绑定的input中输入内容时就会立刻触发onChange事件，所以我们在React中当需要获取搜索栏中的内容时，就会用onChange事件

2 非受控组件现用现取

非受控组件其实就是表单元素的值不会更新state。输入数据都是现用现取的。

如下：下面并没有使用state来控制属性，使用的是事件来控制表单的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "div">

    </div>

</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js"></script>

<!--引入对于组件标签的限制-->
<script src="../React-js/prop-types.js"></script>

<script type="text/babel">

/*
    页面中所有的输入数据都是现用现取的，就是非受控的组件
*/

    class Login extends React.Component{

        login = (event) =>{
            event.preventDefault(); //阻止表单提交 页面刷新
            const {username,password}=this
            // alert(username) 错误的原因：username是节点，需要的是他的value
            // alert(username.value)
            alert(`输入的用户名是：${username.value},密码是：${password.value}`)
        }
        render() {
            return (
                <form action="https://www.baidu.com" onSubmit={this.login}>
                    用户名：<input ref = {self => this.username =self } type = "text" name ="username"/>
                    密码<input ref = {self => this.password =self } type = "password" name ="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login />,document.getElementById("div"));
</script>
</html>

react的 onSubmit是一个监听事件当表单提交时就会触发

表单提交展示用户名和密码，给表单绑定的onSubmit，但是要拿到用户名密码，所以不用用event.target.value的形式获取，需要使用的方法是-》ref：

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

具体形式可以采用回调的形式,之前见过三种形式，在上一章，

（1.字符串形式-不推荐 2.回调形式 3.createRef形式）

回调形式：拿到当前ref所在的节点挂载实例自身

ref={self=>this.username=self}