ReactJS如何通過動態命名參考循環

我正在查看一行代碼，其中有一個動態命名參考輸入，其中「項目」是一個從零開始的遞增值。ReactJS如何通過動態命名參考循環

「輸入類型=」文本「REF = {‘名稱’+項目}默認值= {}項/>」

我將如何通過這些動態參環刮出的值？我沒有運氣就試過這個。它告訴我對象未定義。（輸入的長度將等同於添加元素的數量）

var arr = this.state.inputs; 
var arrayLength = arr.length; 
for (var i = 0; i < arrayLength; i++) { 
    var c = this.refs.name + i.value 
    alert(c); 
}

雖然，這樣沒有問題，但其動態的，因此我需要循環通過它，而不是硬編碼：

alert(this.refs.name0.value); 
alert(this.refs.name1.value); 
alert(this.refs.name2.value);

來源

2016-09-06 nikotromus

'Object.keys' ..... – zerkms

我相信你需要得到DOM對象的輸入，而不僅僅是裁判（至少這是我的經驗）：

import ReactDOM from 'react-dom'; 

const values = {}; 
Object.keys(this.refs) 
    .filter(key => key.substr(0,4) === 'name') 
    .forEach(key => { 
     values[key] = ReactDOM.findDOMNode(this.refs[key])).value || null; 
    });

祝你好運！

來源

2016-09-06 21:13:32 Ian

謝謝！它由於某種原因在循環的第一次迭代中挖掘出null值。我只是用if語句過濾掉它。它工作... – nikotromus

也許註銷該'forEach'中的密鑰，並確保該鍵是一個適當的文本輸入參考。也許還有一些其他元素帶有''name_'' ref？無論哪種方式，很高興它爲你工作:) – Ian

ReactJS如何通過動態命名參考循環

回答

相關問題