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 documentation，可以看到.map将三个参数传递给回调：

<强>回调

生成新数组元素的函数，带有三个参数：


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

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

array：调用了数组映射。

那么r的价值是多少？它将是当前元素的索引。

参数 r与您使用

声明的变量 r 无

var r = this;

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

Object.keys(radios).map(function(key) { ... }); // ^ no r现在是回调中的一个自由变量，将在更高的范围内查找。

要了解有关闭包的更多信息，请查看此MDN article。

我们可以使用ES6 箭头函数来简化映射，如果您使用Babel或r转换代码，则可以使用：

jsx --harmony

因为箭头函数中的{Object.keys(radios).map(key => <div key={key}> <label forHTML={key}> <input ... nChange={this.selectHandlerLoop} /> {radios[key].radio} </label> </div> )}是词法范围的，所以它将引用this方法的this值，这是您的React组件。< / p>

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

2 个答案: