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

Posted 2022-09-23 勇敢*牛牛

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

什么是非受控组件：
非受控组件：它应用的次数没有受控组件多，在工作中，多数使用为受控组件
非受控组件：表单项中的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值

---

创建对象绑定，获取表单项数据对象current，因为层级不确定，推荐使用这个
利用数组map显示，filter过滤

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>)