动态生成的输入Onchange函数将失去其他参数上下文

Question

我试图将option.title作为参数传递给相应生成的RadioGroup形式组件的onChange函数。

onChange接收正确的事件，但是option.title值只是渲染的最后一个。如何将option.title绑定到其组件的onChange？目前，当触发事件时，option.title采用了最后一个生成的元素的值 - 这显示了无论触发哪些元素onChange。

。

generateList(){
        var list = []  
        for (var i in configs){
            var option = configs[i]
            list.push(
                <div>
                <div className="optionTitle">{option.title}</div>
                <RadioGroup onChange={(e) => this.handleRadioChange(option.title, e)}  className="configContainer" horizontal>
                    {this.generateRadio(option.options, option.title)}
                </RadioGroup>
                </div>
            ) 
        }
        return list
    }

Answer 1

尝试此

generateList(){
        return configs.map((option) =>
                (<div>
                <div className="optionTitle">{option.title}</div>
                <RadioGroup onChange={(e) => this.handleRadioChange(option.title, e)}  className="configContainer" horizontal>
                    {this.generateRadio(option.options, option.title)}
                </RadioGroup>
                </div>
            ) )
    }

Answer 2

您可以使用咖喱函数访问两个参数：

handleRadioChange(title){
   return function(e){
      // both the event and the title are accessible here
   }
}
generateList(){
                return configs.map((option) =>
                        (<div>
                        <div className="optionTitle">{option.title}</div>
                        <RadioGroup onChange={this.handleRadioChange(option.title)}  className="configContainer" horizontal>
                            {this.generateRadio(option.options, option.title)}
                        </RadioGroup>
                        </div>
                    ) )
}

请记住，在渲染中调用功能将在每个渲染上创建一个实例。
阅读此信息以获取更多详细信息。