如何在 React 的循环中触发“this" [英] How to trigger 'this' within a loop in React

问题描述

我是个新手，无法获取循环生成的单选按钮的值.我有一个小提琴设置:https://jsfiddle.net/rexonms/zrax0zfa/.

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

先谢谢你.

var Inputs = React.createClass({getInitialState: 函数(){返回 {收音机:{a: { radio: 'Radio Loop A' },b: { radio: 'Radio Loop B' },c:{收音机:'无线电循环C'}},radioNoLoop: '无线电无循环'}},selectHandlerLoop: 函数(e){console.log(e.target.value);},选择句柄:函数(e){console.log(e.target.value);},渲染:函数(){var radios = this.state.radios;var r = 这个；返回(<div>{/* 使用数组创建单选按钮 */}{Object.keys(radios).map(function(key,r) {返回 (<div key={key}><label forHTML={key}><input type="radio" name="loopTest" value={radios[key].radio} id={key} nChange={r.selectHandlerLoop}/>{radios[key].radio}

);})}<小时/>{/* 单选按钮没有数组循环 */}<label forHTML="noLoop"><input type="radio" id="noLoop" value="noLoop" onChange={this.selectHandle}/>{this.state.radioNoLoop}

);}});React.render(, document.getElementById('container'));

解决方案

javascript map 实际上具有您想要做的事情的功能.您将 this 传递给 map 的第二个参数(在回调之后):

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

);}， 这个)}

I am kind-of new to react and having trouble getting value of a radio button generated from a loop. I have a fiddle set-up at: https://jsfiddle.net/rexonms/zrax0zfa/.

The example has two type of radio buttons. One group is generated using loop and the other one without loop. The one without loop works (logs the value of the button) but the ones created with the loop doesn't work when I try to console log the value of the radio button.

Thank you in advance.

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

解决方案

javascript map actually has functionality for what you're trying to do. you pass this to the second argument of map (after the callback):

{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 的循环中触发“this"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！