ReactJS如何循环遍历动态命名的refs

时间:2016-09-06 21:00:04

标签: reactjs

我正在查看为输入动态命名refs的一行代码,其中' item'是从零开始的递增值。

"输入类型="文字" ref = {' name' + item} defaultValue = {item} />"

我如何循环使用这些动态引用来清除值?我试了这个没有运气。它告诉我对象未定义。 (输入的长度等于添加元素的数量)

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

1 个答案:

答案 0 :(得分:6)

我相信你需要为输入获取DOM对象,而不仅仅是refs(至少这是我的经验):

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;
    });
祝你好运!