时间戳

首页 > 解决方案 > 如何在更改文本时保持按钮大小？

reactjs - 如何在更改文本时保持按钮大小？

问题描述

我有一个切换按钮，其文本必须在每次单击时更改：

<Button onClick={this.changeView}>{currentView === 'a' ? 'First' : 'Second Chance'}
                </Button>

changeView = (event, data) => {
    let nextView = (this.state.currentView === 'a') ? 'b' : 'a';
    this.setState({ currentView: nextView });
}

它可以工作，但是由于第二个标签比第一个标签大得多，因此按钮会不断调整大小。我希望它保持固定长度，即第二个标签的大小……这可能吗？

标签： reactjssemantic-uisemantic-ui-react

解决方案

为 Button 设置宽度属性。

2 个选项：内联样式或 css 类名。我会推荐 className 选项。

内联样式选项：

<Button style={{width: '<YOUR_WIDTH>px'}} onClick={this.changeView}>{currentView === 'a' ? 'First' : 'Second Chance'}
                </Button>

changeView = (event, data) => {
    let nextView = (this.state.currentView === 'a') ? 'b' : 'a';
    this.setState({ currentView: nextView });
}

推荐阅读