更改複選框的檢查值，但不使用setState，但在React中使用ref屬性

Question

我使用ref選擇一個輸入元素，然後最終將每個選中的值重置爲false（取消選中）。我們應該使用setState，但在我的情況下，它的工作是按需要的。所以這樣做有什麼深層的缺點？

insertRow(event){ 
    ..... 
    let op,t,res=''; 

    for(let i=1;i<4;i++){ 
    op="op"+i; 
    t=this.refs[op]; 
    res+=t.checked?t.value:''; 
    t.checked=false; 
    } 
    ..... 
} 

render(){ 
    return(
    <div>... 
     <input key="1" ref="op1" type="checkbox" value="a"/>a) Dietary Restrictions<br/> 
     <input key="2" ref="op2" type="checkbox" value="b"/>b) Physical Disabilities<br/> 
     <input key="3" ref="op3" type="checkbox" value="c"/>c) Medical Needs<br/> 
    </div> 
); 
} 

Answer 1

我使用參考選擇的輸入元件，然後最終復位每個選中的值設置爲false（取消選中）。我們應該使用setState，但在我的情況下，它按照需要工作。那麼這樣做有什麼深層的缺點？

有關您的實施的一些事情。

1. 應儘可能謹慎使用參考文獻。任何可以通過狀態聲明處理應根據Facebook的推薦。見下面...

你的第一個傾向可能是使用refs在應用程序中「發生事情」。如果是這種情況，請花一點時間，更仔細地考慮組件層次結構中應該擁有哪些狀態。通常情況下，很顯然，「擁有」該州的適當位置在層次結構中處於較高水平。有關這方面的示例，請參閱提升狀態指南。

您正在使用訪問參考文獻的方法已過時。這樣做的電流方式，以便如下：

<input type="text" ref={(input) => { this.textInput = input; }} />

您可以將此訪問通過以下調用這個裁判：

this.textInput.someMethodOrProperty;

---

這裏是提供最好的鏈接有關Refs and the DOM的做法。