Question

我正在尝试将option.title作为参数传递给相应生成的onChange表单组件的RadioGroup函数。

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

您可以使用function currying访问这两个参数：

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

请记住，在render中调用函数会在每个渲染上创建一个实例请阅读this了解详情。

动态生成的输入onChange函数会丢失其他参数上下文

2 个答案: