专栏首页河湾欢儿的专栏受控组件表单&不受控组件

受控组件表单&不受控组件

表单里面的数据 根据State确定 在 HTML 中,表单元素如 <input>,<textarea> 和 <select>表单元素通常保持自己的状态,并根据用户输入进行更新。而在 React 中,可变状态一般保存在组件的 state(状态) 属性中,并且只能通过 setState()更新。

我们可以通过使 React 的 state 成为 “单一数据源原则”来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式,其值由 React 控制的输入表单元素称为“受控组件”。

数据/状态的定义: 使用 this.state = {} 状态的修改: this.state.setState({})

input

 // 定义类组件
    class NameForms extends React.Component{
        constructor(props){
            super(props)

            // 定义状态
            this.state = {value:''}
            // 函数可以产生独立作用域  ,在这里修改函数内部的指针指向 当前组件(类)
            this.handleChange = this.handleChange.bind(this)
            this.handleSubmit = this.handleSubmit.bind(this)
        }

        handleChange(e){
            this.setState({value:e.target.value})
        }

        handleSubmit(e){
            alert("A name was submitted : " + this.state.value)
            e.preventDefault()
        }

        render(){
            return (
                <form onSubmit={this.handleSubmit}>
                    <label for="">
                        name : <input type="text" value={this.state.value} onChange={this.handleChange} />
                    </label>

                    <input type="submit" value="Submit" />
                </form>
            )
        }
    }
    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">

            </div>
        </body>

    </html>
    <script type="text/babel">


        // 定义类组件
        class NameForms extends React.Component{
            constructor(props){
                super(props)

                // 定义状态
                this.state = {value:''}

                // 函数可以产生独立作用域  ,在这里修改函数内部的指针指向 当前组件(类)
    //          this.handleChange = this.handleChange.bind(this)
    //          this.handleSubmit = this.handleSubmit.bind(this)
                this.fn = this.fn.bind(this)
            }

            handleChange(e){
                this.setState({value:e.target.value})

                console.log((this))

            }

            handleSubmit(e){
                //alert("A name was submitted : " + this.state.value)
                console.log(this.state.value)
                e.preventDefault()
            }

            fn(){
                console.log(this)
            }

            render(){
                return (

                    <div>
                        <button onClick={this.fn}>点击</button>
                        <form onSubmit={this.handleSubmit}>
                            <label>
                                name : <input type="text" value={this.state.value} onChange={this.handleChange} />
                            </label>

                            <input type="submit" value="Submit" />
                        </form>
                    </div>

                )
            }
        }

        ReactDOM.render(
            <NameForms></NameForms>, 
            document.getElementById('root') 
        );

    </script>

textarea

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">

            </div>
        </body>

    </html>
    <script type="text/babel">


        // 定义类组件
        class NameForms extends React.Component{
            constructor(props){
                super(props)

                // 定义状态
                this.state = {value:''}
                this.handleChange = this.handleChange.bind(this)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleChange(e){
                this.setState({value:e.target.value})
            }

            handleSubmit(e){
                alert("A name was submitted : " + this.state.value)
                e.preventDefault()
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <label for="">
                            name : <textarea type="text" value={this.state.value} onChange={this.handleChange}></textarea>
                        </label>

                        <input type="submit" value="Submit" />
                    </form>
                )
            }
        }

        ReactDOM.render(
            <NameForms></NameForms>, 
            document.getElementById('root') 
        );

    </script>

select(实现单选)

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">

            </div>
        </body>

    </html>
    <script type="text/babel">


        // 定义类组件
        class NameForms extends React.Component{
            constructor(props){
                super(props)

                // 定义状态
                this.state = {value:''}
                this.handleChange = this.handleChange.bind(this)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleChange(e){
                this.setState({value:e.target.value})
            }

            handleSubmit(e){
                alert("A name was submitted : " + this.state.value)
                e.preventDefault()
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            Pick your favorite La Croix flavor:
                            <br />
                            <select value={this.state.value} onChange={this.handleChange}>
                                <option value="grapefruit">Grapefruit</option>
                                <option value="lime">Lime</option>
                                <option value="coconut">Coconut</option>
                                <option value="mango">Mango</option>
                            </select>
                        </label>
                        <input type="submit" value="Submit" />
                      </form>
                )
            }
        }

        ReactDOM.render(
            <NameForms></NameForms>, 
            document.getElementById('root') 
        );

    </script>

select(实现多选)

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">

            </div>
        </body>

    </html>
    <script type="text/babel">


        // 定义类组件
        class NameForms extends React.Component{
            constructor(props){
                super(props)

                // 定义状态
                this.state = {value:''}
                this.handleChange = this.handleChange.bind(this)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleChange(e){
                this.setState({value:e.target.value})
            }

            handleSubmit(e){
                alert("A name was submitted : " + this.state.value)
                e.preventDefault()
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            Pick your favorite La Croix flavor:
                            <br />

                            <select multiple value={["grapefruit","lime"]} onChange={this.handleChange}>
                                <option value="grapefruit">Grapefruit</option>
                                <option value="lime">Lime</option>
                                <option value="coconut">Coconut</option>
                                <option value="mango">Mango</option>
                            </select>
                        </label>
                        <input type="submit" value="Submit" />
                      </form>
                )
            }
        }

        ReactDOM.render(
            <NameForms></NameForms>, 
            document.getElementById('root') 
        );

    </script>

file(文件上传)

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">

            </div>
        </body>

    </html>
    <script type="text/babel">


        // 定义类组件
        class NameForms extends React.Component{
            constructor(props){
                super(props)

                // 定义状态
                this.state = {value:''}
                this.handleChange = this.handleChange.bind(this)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleChange(e){
                this.setState({value:e.target.value})
            }

            handleSubmit(e){
                // alert("A name was submitted : " + this.fileInput.files[0].name)
                console.log(this.fileInput.files)
                e.preventDefault()
            }

            // 在 React 中,一个 <input type =“file”/> 和一个普通的 <input /> 类似,但有一个重要的区别:它是只读的(read-only)。 
            // (您不能以编程方式设置值。)相反,你应该使用 File API 与文件进行交互。

            // 使用一个 ref 来访问提交处理程序中的文件

            render(){
                return (
                     <form onSubmit={this.handleSubmit}>
                        <label>
                            Upload file:
                            <input type="file" ref={input => {
                              this.fileInput = input;
                            }}/>
                        </label>
                        <br />
                        <button type="submit">Submit</button>
                  </form>
                )
            }
        }

        ReactDOM.render(
            <NameForms></NameForms>, 
            document.getElementById('root') 
        );

    </script>

不受控组件

在大多数情况下,推荐使用受控组件来实现表单 , 也就是说, 表单的数据由 react组件负责处理

在表单处理的过程中, 表单的数据也可以由dom元素进行处理, 称为不受控表单

在不受控组件中, 表单元素的操作使用dom操作来完成

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        </head>

        <body>
            <div id="root"></div>



        </body>

    </html>
    <script type="text/babel">

        class Parent extends React.Component{
            constructor(props){
                super(props)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleSubmit(e){
                console.log(this)
                console.log(this.inpEle.value)

                // 阻止默认提交事件
                e.preventDefault()
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref={(inp)=>{this.inpEle=inp}}/>
                        <input type="submit"  value='submit' />
                    </form>

                )
            }

            componentDidMount(){
                console.log(this.inpEle)
            }
        }

        ReactDOM.render(
            <Parent>Hello, world!</Parent>, 
            document.getElementById('root') 
        );

    </script>

defaultValue(表单的默认值, 在表单中,通过defaultValue设置表单的默认值)

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        </head>

        <body>
            <div id="root"></div>



        </body>

    </html>
    <script type="text/babel">

        class Parent extends React.Component{
            constructor(props){
                super(props)
                this.handleSubmit = this.handleSubmit.bind(this)
            }

            handleSubmit(e){
                console.log(this)
                console.log(this.inpEle.value)

                // 阻止默认提交事件
                e.preventDefault()
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" defaultValue="111" ref={(inp)=>{this.inpEle=inp}}/>
                        <input type="submit"  value='submit' />
                    </form>

                )
            }

            componentDidMount(){
                console.log(this.inpEle)
            }
        }

        ReactDOM.render(
            <Parent>Hello, world!</Parent>, 
            document.getElementById('root') 
        );

    </script>

受控表单到不受控表单的转化

 <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <!--react的核心库-->
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

            <!--react的与dom相关的一些功能-->
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

            <!--将浏览器不支持的jsx语法转化为js语法-->
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root">
            </div>
        </body>

    </html>
    <script type="text/babel">


        // 受控组件  -- 不能输入
        ReactDOM.render(<input value="hi" readOnly/>, 
        document.getElementById("root"));

        // 受控组件转化为不受控组件
        var bool = ""
        setTimeout(function() {
          ReactDOM.render(<input value={bool} />, 
          document.getElementById("root"));
        }, 10000);

    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue 入门

    vue 的发展史 2013.12.24 发布0.7.0 2014.1.27发布0.8.0 2014.2.25 发布0.9.0 2014.3.24发布0....

    河湾欢儿
  • 第二节单利、工厂、构造函数、原型链、call、bind、apply、sort

    河湾欢儿
  • 第八节dom以及dom库的封装

    河湾欢儿
  • Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。

    六小登登
  • Zepto这样操作元素属性

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 使用Zepto的时候,我们经常会要去操作一些DOM的属性,或元素本身...

    IMWeb前端团队
  • vue-print-nb 打印插件的使用

    import Print from 'vue-print-nb' Vue.use(Print)

    tianyawhl
  • Zepto这样操作元素属性

    已经知道了如何使用attr方法,在开始分析attr实现源码之前,我们先了解一下这几个函数。

    IMWeb前端团队
  • 简单拖拽实现

    拖拽的元素必须绝对定位。 在实际操作中,犯了一个简单的错误:   对于iframe元素的事件绑定,需要在src完全加载后进行绑定。 iframe.onload ...

    欲休
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • Vue-WebSocket的使用

    〆 千寻、

扫码关注云+社区

领取腾讯云代金券