首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React使用数组使用按钮填充ButtonGroup

React使用数组使用按钮填充ButtonGroup
EN

Stack Overflow用户
提问于 2017-12-01 19:15:08
回答 0查看 508关注 0票数 0

我尝试使用array.map()用按钮填充ButtonGroup,但是按钮没有出现。我使用完全相同的方法用MenuItems填充DropdownButton,没有问题。

工作的DropdownButton在这里:

代码语言:javascript
复制
<DropdownButton title={this.state.regionallevel} onSelect={(evt)=>{
                this.setState({regionallevel: evt}, () => {
                    this.sendNewScenarios();
                })}}>
                {regionalLevels.map((regionalleveli, i) =>
                    <MenuItem eventKey={regionalleveli} key={i}>{regionalleveli}</MenuItem>)}
            </DropdownButton>  

下面是不能工作的ButtonGroup:

代码语言:javascript
复制
<ButtonGroup vertical>
                {scenarios.map=((scenarioi, i) =>
                    <Button color="default" key={i} onClick={() => this.onCheckboxBtnClick(scenarioi)} active={this.state.checkboxesSelected.includes(scenarioi)}>{scenarioi}</Button>)}
            </ButtonGroup>

如果我这样做,ButtonGroup确实可以工作,但我需要它是动态的:

代码语言:javascript
复制
<ButtonGroup vertical>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[0])} active={this.state.checkboxesSelected.includes(scenarios[0])}>{scenarios[0]}</Button>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[1])} active={this.state.checkboxesSelected.includes(scenarios[1])}>{scenarios[1]}</Button>
                <Button color="default" onClick={() => this.onCheckboxBtnClick(scenarios[2])} active={this.state.checkboxesSelected.includes(scenarios[2])}>{scenarios[2]}</Button>
            </ButtonGroup>

组件是从react-bootstrap导入的。问题可能出在哪里?

更新:好的,我不知道为什么,但是ButtonGroup现在可以正常工作了,即使我根本没有改变代码。但是还有另一个ButtonGroup,它应该以同样的方式工作,但并不是这样的。

代码语言:javascript
复制
<ButtonGroup vertical>
                {periods.map=((periodi, i) =>
                    <Button color="default" key={i} onClick={() => this.onRadioBtnClick(periodi)} active={this.state.radioButtonSelected===periodi}>{periodi}</Button>)}
            </ButtonGroup>

这是控制台显示的内容。第95行是上面的ButtonGroup开始的地方:

代码语言:javascript
复制
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in div (created by ButtonGroup)
in ButtonGroup (at DropdownMenuScenarios.js:95)
in div (at DropdownMenuScenarios.js:56)
in DropdownMenuScenarios (at App.js:36)
in div (at App.js:29)
in App (at index.js:7)
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47592196

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档