您的位置:首页 > 编程学习 > > 正文

react组件参数(浅析React中的受控组件和非受控组件)

更多 时间:2022-03-29 03:19:18 类别:编程学习 浏览量:304

react组件参数

浅析React中的受控组件和非受控组件

非受控组件

表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值)

1.非受控组件

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--准备好一个容器-->
    <li id="test"></li>
    
    <!--引入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>
    
  • 受控组件

    在HTML中,标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为:“受控组件”。

    2.受控组件 (受到控制)

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--准备好一个容器-->
    <li id="test"></li>
    
    <!--引入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>
    
  • react组件参数(浅析React中的受控组件和非受控组件)

    注意

    一般情况,受控组件用的多,因为在非受控组件中会多次使用ref,而官方文档上有些“请勿过度使用ref”,使用次数多了会存在效率上的问题。

    结论

    受控和非受控元素都有其优点,根据具体情况选择。如果表单在UI反馈方面非常简单,则对ref进行控制是完全正确的,即使用非受控组件。

    特征 非受控制 受控
    一次性检索(例如表单提交) yes yes
    及时验证 no yes
    有条件的禁用提交按钮 no yes
    执行输入格式 no yes
    一个数据的几个输入 no yes
    动态输入 no yes

    以上就是浅析React中的受控组件和非受控组件的详细内容,更多关于react受控组件和非受控组件的资料请关注开心学习网其它相关文章!

    您可能感兴趣