react——非受控组件和非受控组件的应用

非受控组件和非受控组件的应用

什么是非受控组件：

非受控组件：它应用的次数没有受控组件多，在工作中，多数使用为受控组件

非受控组件：表单项中的value或checked值，它不受state中的属性控制，可以通过dom对象来获取当前表单项中的value或checked值

• ref 如果绑定在普通的html元素中则返回dom对象
• ref 如果绑定在“类组件”（只能是类组件）中，则返回当前自定义类组件实例对象，可以用它来完成组件通信

如何获取ref实例对象

react中如何来获取普通的html元素的dom对象：ref对象来获取

createRef 通过此方法得到一个ref实例对象

current获取实例对象

// 创建得到一个ref实例对象
usernameRef = createRef()
//绑定
<input type="text" ref={this.usernameRef} />
// 通过ref绑定好的对象，来完成对应表单项数据的获取
console.log(this.usernameRef.current.value)      

非受控组件的应用

非受控组件：表单项中的value或checked值，它不受state中的属性控制，可以通过dom对象来获取当前表单项中的value或checked值

import React, { Component, createRef } from "react";

export default class App extends Component {
    /* 生成多个createRef() */
    lessonRefs = Array(3)
        .fill("")
        .map((_) => createRef());

    ckall = ()=>{/* 选出被勾选的元素的value值 */
        let value = this.lessonRefs.map(item=>{
            if(item.current.checked){
                return item.current.value
            }else{
                return null
            }
        }).filter((item)=>item != null);
        this.value = value;
        this.forceUpdate();
       
    }
    render() {
        return (<div>
            <input  type="checkbox" onChange={this.ckall}></input>获取被选的对象value
            <hr />
            <ul>
                <input type="checkbox" value="html" ref={this.lessonRefs[0]}/>html<br/>
                <input type="checkbox" value="css" ref={this.lessonRefs[1]}/>css<br/>
                <input type="checkbox" value="js" ref={this.lessonRefs[2]}/>js<br/>
            </ul>
            <hr />
            <div>
                {
                   this.value ?<div>{this.value}</div>:<div>空</div>
                }
            </div>
        </div>)
    }
}