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