React - 受控组件和非受控组件

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

非著名奶茶爱好者

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

阅读量203

点赞数 4

分类专栏： React 文章标签： react js

本文链接：https://blog.csdn.net/weixin_46398446/article/details/116888107

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>

<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        myRef1 = React.createRef();
        myRef2 = React.createRef();
        handleSubmit = (event) => {
            event.preventDefault() // 阻止表单提交
            const username = this.myRef1.current
            const password = this.myRef2.current
            alert(`您输入的用户名是:${username.value},您输入的密码是：${password.value}`)
        }
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名：<input ref={this.myRef1} type="text"/> &nbsp;
                    密码：<input ref={this.myRef2} type="text"/> &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

2.受控组件（受到控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>

<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        // 保存用户名到状态中
        saveUsername = (e) => {
            this.setState({username: e.target.value})
        }

        // 保存密码到状态中
        savePassword = (e) => {
            this.setState({password: e.target.value})
        }

        handleSubmit = (e) => {
            e.preventDefault() // 阻止表单提交
            const {username,password} = this.state
            alert(`您输入的用户名是:${username},您输入的密码是：${password}`)
        }
        render() {
            // onChange是一有变化就改变
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveUsername} type="text"/> &nbsp;
                    密码：<input onChange={this.savePassword} type="text"/> &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>