如何在 React 的循环中触发“this”

IT技术 javascript reactjs this
2021-04-29 03:22:27

我是一种新的react并且无法获取从循环生成的单选按钮的值。我有一个小提琴设置: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'));
2个回答

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)}

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

让我们看看那部分:

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

这声明了一个需要两个参数key的函数r,并将其传递给.map.map将调用该函数并提供相应的参数。

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

打回来

生成新数组元素的函数,采用三个参数:

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

那么value会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内部箭头函数是词法范围的,它会引用方法thisrender,也就是你的 React 组件。