Javascript 如何触发'；这'；在一个循环中进行反应

我是一个新的反应和有麻烦的获得一个单选按钮产生的循环值。我在：

该示例有两种类型的单选按钮。一组使用循环生成，另一组不使用循环生成。没有循环的一个可以工作（记录按钮的值），但是当我尝试控制台记录单选按钮的值时，使用循环创建的一个不能工作

先谢谢你

var Inputs = React.createClass({

    getInitialState: function(){
        return {
            radios: {
                a: { radio: 'Radio Loop A' },
                b: { radio: 'Radio Loop B' },
                c: { radio: 'Radio Loop C' }
            },

            radioNoLoop: 'Radio No Loop' 
        }
    },

    selectHandlerLoop: function(e){
        console.log(e.target.value);
    },

    selectHandle: function(e){
        console.log(e.target.value);
    },

    render: function() {
        var radios = this.state.radios;
        var r = this;
        return(
            <div>
                {/* Creating radio buttons using Array */}
                {Object.keys(radios).map(function(key,r) {
                    return ( 
                        <div key={key}>
                            <label forHTML={key}>
                                <input type="radio" name="loopTest" value={radios[key].radio} id={key} nChange={r.selectHandlerLoop} /> {radios[key].radio}
                            </label>
                        </div>

                    );
                })}

               <hr />
               {/* Radio button no array loop */}
               <label forHTML="noLoop">
                   <input type="radio" id="noLoop" value="noLoop" onChange={this.selectHandle}/> {this.state.radioNoLoop}
               </label>
            </div>
        );
    }
});

React.render(<Inputs />, document.getElementById('container'));

var Inputs=React.createClass({
getInitialState:函数（）{
返回{
无线电：{
a:{radio:'无线电环路a'}，
b:{radio:'无线电环路b'}，
c:{radio:'radio Loop c'}
},
radioNoLoop:“无线电无环路”
}
},
selectHandlerLoop:函数（e）{
console.log（如target.value）；
},
选择手柄：功能（e）{
console.log（如target.value）；
},
render:function（）{
var无线电=this.state.radios；
var r=这个；
返回(
{/*使用数组创建单选按钮*/}
{Object.keys（radios）.map（function（key，r）{
报税表（
{radios[key].radio}
);
})}

{/*单选按钮无数组循环*/}
{this.state.radioNoLoop}
);
}
});
React.render（，document.getElementById（'container'）；

javascript映射实际上具有用于您尝试执行的操作的功能。您将

此

传递给map的第二个参数（在回调之后）：

{Object.key（radios）.map（function（key）{
报税表（
{radios[key].radio}
);
}，这个）}

你的问题与反应无关。您似乎对函数/闭包的工作方式有误解

让我们看看这一部分：

Object.keys(radios).map(function(key,r) { ... });

这声明了一个需要两个参数的函数，

key

和

r

，并将其传递给

.map

.map

将调用函数并提供相应的参数

如果查看，可以看到

.map

将三个参数传递给回调：

{Object.keys(radios).map(function(key) {
  return ( 
    <div key={key}>
      <label forHTML={key}>
        <input type="radio" name="loopTest" value={radios[key].radio} id={key} onChange={this.selectHandlerLoop} /> {radios[key].radio}
      </label>
    </div>
  );
}, this)}

回调

函数，该函数生成新数组的元素，包含三个参数：

• currentValue

  ：数组中正在处理的当前元素

• 索引

  ：数组中正在处理的当前元素的索引

• array

  ：调用了数组映射

那么

r

的值是多少？它将是当前元素的索引

参数

r

与您声明的变量

r

没有任何关系

var r = this;

如果希望回调中的

r

引用该变量，请将其从参数列表中删除

Object.keys(radios).map(function(key) { ... });
//                                  ^ no r

r

现在是回调中的自由变量，将在更高的范围内查找

要了解有关闭包的更多信息，请查看以下内容

---

我们可以通过使用ES6箭头函数来简化映射，如果您使用Babel或

jsx--harmony来传输代码，您可以使用这些函数：

{Object.keys(radios).map(key => 
  <div key={key}>
    <label forHTML={key}>
      <input ... nChange={this.selectHandlerLoop} /> {radios[key].radio}
    </label>
  </div>
)}

{Object.keys（radios.map）（key=>
{radios[key].radio}
)}

因为
this
内部箭头函数是词汇范围，它将引用
render
方法的
this
值，这是您的React组件。
到底什么不起作用？请解释问题。您需要更新onChange以使用this.selectHandlerLoop或r.selectHandler。更新小提琴：