我尝试使用array.map()用按钮填充ButtonGroup,但是按钮没有出现。我使用完全相同的方法用MenuItems填充DropdownButton,没有问题。
工作的DropdownButton在这里:
<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:
<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确实可以工作,但我需要它是动态的:
<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,它应该以同样的方式工作,但并不是这样的。
<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开始的地方:
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)https://stackoverflow.com/questions/47592196
复制相似问题