如何在React中的循环内触发'this'

Question

我很善于反应并且无法获得循环生成的单选按钮的价值.我有一个小提琴设置:https://jsfiddle.net/rexonms/zrax0zfa/.

该示例有两种类型的单选按钮.一组使用循环生成,另一组使用循环生成.没有循环的那个工作(记录按钮的值)但是当我尝试控制记录单选按钮的值时,用循环创建的那个不起作用.

先感谢您.

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

Answer 1

javascript地图实际上具有您正在尝试执行的操作的功能.你传递this给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)}

Answer 2

你的问题与React无关.您似乎对函数/闭包的工作方式存在误解.

让我们看看那部分:

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

声明一个函数期待两个参数,key并且r,并将其传递给.map..map将调用该函数并提供相应的参数.

如果查看.map文档,可以看到.map将三个参数传递给回调:

打回来

产生新数组元素的函数,带有三个参数:

• currentValue:数组中正在处理的当前元素.
• index:数组中正在处理的当前元素的索引.
• array:调用了数组映射.

那么它的价值r是什么？它将是当前元素的索引.

该参数 r有什么做的变量 r你声明

var r = this;

如果您希望r 在回调内部引用该变量,请将其从参数列表中删除

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

r 现在是回调中的一个自由变量,将在更高的范围内查找.

要了解有关闭包的更多信息,请查看此MDN文章.

我们可以使用ES6 箭头函数简化映射,如果您使用Babel或jsx --harmony以下代码转换代码,可以使用它们:

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

因为this内部箭头函数是词法范围的,所以它将引用方法的this值render,即React组件.