遍历组件中的所有 refs 值答案

【问题标题】：Iterate over all refs values in component遍历组件中的所有 refs 值
【发布时间】：2015-06-09 14:01:29
【问题描述】：

我正在尝试访问组件中的所有 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。

有人帮忙吗？

【问题讨论】：

您的代码运行良好，我在控制台中得到了预期的结果。小提琴中唯一缺少的是绑定 React 库。
我得到的是参考名称而不是值。

标签： javascript reactjs react-jsx

【解决方案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 更好。

【讨论】：

很高兴这有帮助，但实际上，尽量避免使用 refs。仅在您的用例和您的用例中（访问输入元素的值）就可以了。 React 与回调非常好。
是的，我同意。我这样做只是因为我有很多组件并且每个组件至少有 10 个输入字段，所以我想创建一个 mixin 来解析所有字段值并执行 ajax 请求。

【解决方案2】：

使用lodash，您可以遍历this.refs 并创建简单对象。

let data = _.mapValues(this.refs, function(ref) { return ref.value });

【讨论】：