Как сохранить размер кнопки при изменении текста?

Question

У меня есть кнопка, текст которой должен меняться при каждом щелчке:

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

Она работает, но, поскольку вторая метка намного больше первой, кнопка продолжает изменять размеры.Я бы хотел, чтобы он оставался на фиксированной длине, равной размеру второй метки ... это возможно?

Answer 1

Установить свойство ширины для кнопки.

2 варианта: встроенный стиль или css className. Я бы порекомендовал вариант 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 });
}