javascript - 遍历组件中的所有 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我正在与.

我觉得，这可能不是一个好主意，但我不知道如何处理这个 atm。

有人帮忙吗？

Answer 1

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

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

无论如何，根据我的经验，最好使用 Controlled Components在 refs 上。