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

Question

我对反应有点陌生，无法获取循环生成的单选按钮的值。我有一个 fiddle 设置：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 将三个参数传递给回调：

callback

Function that produces an element of the new Array, taking three arguments:

currentValue: The current element being processed in the array.

index: The index of the current element being processed in the array.

array: The array map was called upon.

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

参数r与变量没有任何关系r 你用

声明

var r = this;

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

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

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

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

我们可以使用 ES6 arrow functions 来简化映射，如果你用 Babel 或 jsx --harmony:

转译你的代码，你可以使用它

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

因为arrow functions里面的this是词法作用域的，它会引用render方法的this值，也就是你的 React 组件。

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

How to trigger 'this' within a loop in React

javascript

this

reactjs