迭代组件中的所有refs值

Question

我试图访问我的组件中的所有ref值并使用它们执行某些操作(例如,创建有效负载以发送到服务器)

我试图做一个简单的for..in循环,而不是在每个ref上使用getDOMNode().value但它不起作用.

var Hello = React.createClass({

getAllRefsValues: function() {
    for(ref in this.refs) {
        console.log(ref);
        // ref.getDOMNode().value doesnt work here 
    }
},
render: function() {
    return (
     <div>
        <button onClick={this.getAllRefsValues}>Get all props values</button>
        <input type="text" ref="test1"/>
        <input type="text" ref="test2"/>
        <input type="text" ref="test3"/>
  </div>
    )
 }
});

这是我正在使用的jsfiddle.

我有一种感觉,这可能不是一个好主意,但我不知道如何处理这个问题.

有人帮吗？

Answer 1

这是因为this.refs是一个对象,你需要获取值,而不是键:

getAllRefsValues: function() {
    for (var ref in this.refs) {
        console.log(this.refs[ref]);
        console.log(this.refs[ref].getDOMNode()); 
    }
}

根据我的经验,无论如何,它是更好地使用自控元件上refs.