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如何通过动态命名参考循环

回答

相关问题