zoukankan      html  css  js  c++  java
  • 表单元素的受控组件和非受控组件

    非受控组件

    非受控组件:这时表单数据将交由 DOM 节点来处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值)

    要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref 来从 DOM 节点中获取表单数据。

    class App extends React.Component{
    
                submit = (e)=>{
                    console.log(this.textInput.value) //打印输入框的值是什么
                    e.preventDefault()  //取消默认事件
                }
    
                render(){
                    return (
                        <div>
                            <form onSubmit={this.submit}>
                            	//    name属性                    通过ref的回调形式来从DOM节点获取数据(详情访问https://www.cnblogs.com/axingya/p/13598832.html)
                                <input name="textInput" type="text" ref={el=>this.textInput = el}/>    
                                <input type="submit"/>   //提交按钮
                            </form>
                        </div>
                    )
                }
            }
    

    通过ref给form表单做标记,在一些条件下,可以直接拿值( submit = (e)=>{}的时候)

    受控组件(官网推荐)

    受控组件:在HTML中,表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态通常保存在组件的 state中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。受控组件必须要有onChange

    渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。

    被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

    class App extends React.Component{
                constructor(){
                    super()
                    this.state = {
                    //默认值
                        value:"123"
                    }
                }
                submit = (e)=>{
                    console.log(this.state.value)
                    e.preventDefault()
                }
                // 执行该函数,通过setState方式改变值,这样数据就会受到管理,
                handleChange = (e)=>{
                    this.setState({
                        value:e.target.value
                    })
                }
    
                render(){
                    return (
                        <div>
                            <form onSubmit={this.submit}>
                                {/*就不需要ref标记了   一旦写了value属性就必须另外添加上onChange回调函数搭配,一旦输入就执行函数 */}
                                <input name="textInput" type="text" value={this.state.value} onChange={this.handleChange}/>    
                                <p>{this.state.value}</p>
                                <input type="submit"/>
                            </form>
                        </div>
                    )
                }
            }
    

    组件分类:大方向上有函数式组件 or 类组件

    对表单元素而言,组件分类:受控组件 vs 非受控组件

    ​ 受控组件: 受到数据的控制,使得react成为唯一的数据源. 像input 通过value={this.state.value}绑定状态 触发事件onChange={()=>{this.setState({value:e.target.value})}}
    非受控组件: 只需要在dom元素上面通过ref进行绑定取值即可。

  • 相关阅读:
    【bzoj2820】GCD
    【learning】莫比乌斯反演
    【bzoj2151】种树
    【noip模拟】局部最小值
    【learning】多项式乘法&fft
    【learning】二分图最大匹配的König定理
    【noip模拟】2048
    【noip模拟】修长城
    【noip模拟】最小点覆盖
    【noip模拟】Fantasia
  • 原文地址:https://www.cnblogs.com/axingya/p/13599230.html
Copyright © 2011-2022 走看看