Кнопка Ext React Segmented выдает ошибку при указании значения - PullRequest
Новая
       15

Кнопка Ext React Segmented выдает ошибку при указании значения

0 голосов
/ 05 мая 2020

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

Invalid value "28800" for segmented button: "ext-segmentedbutton-1"

Вот код, я также добавил Скрипка Sencha 

import React, { Component } from 'react';
import { launch} from '@sencha/ext-react';
import ExtReactDOM from '@sencha/ext-react-modern';
import { ExtContainer, ExtPanel, ExtLabel, ExtButton, SegmentedButton } from '@sencha/ext-react-modern';

const MINUTES_5_IN_SECONDS = 5 * 60;
const MINUTES_30_IN_SECONDS = 30 * 60;
const HOURS_2_IN_SECONDS = 2 * 60 * 60;
const HOURS_8_IN_SECONDS = 8 * 60 * 60;
const HOURS_24_IN_SECONDS = 24 * 60 * 60;

class App extends Component {

    state = {
        secondsOfHistory: HOURS_2_IN_SECONDS,
    }

    handleTimeFrameChange = (value) => {
        console.log(value);
        this.setState({
            secondsOfHistory: value
        });
        this.props.handleTimeFrameChange(value);
    }


    render() {
        return (
            <ExtContainer layout="fit" padding={10} fullscreen>
                <ExtPanel title="ExtReact" bodyPadding={10} shadow>
                    <SegmentedButton
                        value={'28800'}
                    >
                    <ExtButton
                        text={'24 Hours'}
                        value={HOURS_24_IN_SECONDS}
                    />
                    <ExtButton
                        text={'8 Hours'}
                        value={HOURS_8_IN_SECONDS}
                    />
                    <ExtButton
                        text={'2 Hours'}
                        value={HOURS_2_IN_SECONDS}
                    />
                    <ExtButton
                        text={'30 Minutes'}
                        value={MINUTES_30_IN_SECONDS}
                    />
                    <ExtButton
                        text={'5 Minutes'}
                        value={MINUTES_5_IN_SECONDS}
                    />
                </SegmentedButton>
                </ExtPanel>
            </ExtContainer>
        )
    }
}

ExtReactDOM.render(<App />, document.body);

Вот скрипка

Если я удалю параметр «значение», страница отобразится, но в наборе кнопок ничего не будет выделено. Почему выдает ошибку?

Кстати, меня не впечатлили Ext JS и ExtReact. Я много лет занимался разработкой во множестве фреймворков JS, и Ext JS, несмотря на то, что в нем есть несколько замечательных виджетов, было невероятно неприятно выполнять самые простые вещи. У кого-нибудь еще был такой опыт?

1 Ответ

0 голосов
/ 06 мая 2020

Вы можете установить pressed в дочернем компоненте, например: 

 render() {
        return (
            <ExtContainer layout="fit" padding={10} fullscreen>
                <ExtPanel title="ExtReact" bodyPadding={10} shadow>
                    <SegmentedButton>
                    <ExtButton
                        text={'24 Hours'}
                        value={HOURS_24_IN_SECONDS}
                        pressed
                    />
                    <ExtButton
                        text={'8 Hours'}
                        value={HOURS_8_IN_SECONDS}
                    />
                    <ExtButton
                        text={'2 Hours'}
                        value={HOURS_2_IN_SECONDS}
                    />
                    <ExtButton
                        text={'30 Minutes'}
                        value={MINUTES_30_IN_SECONDS}
                    />
                    <ExtButton
                        text={'5 Minutes'}
                        value={MINUTES_5_IN_SECONDS}
                    />
                </SegmentedButton>
                </ExtPanel>
            </ExtContainer>
        )
    }

Взгляните на пример: https://fiddle.sencha.com/#view / editor & fiddle / 35pd

...