Ext React Segmented按钮在提供值时引发错误

Question

我正在使用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);

Here's the Fiddle

如果我删除'value'选项，则页面将呈现，但按钮组将没有任何选择。为什么会引发错误？

顺便说一句，ExtJS和ExtReact确实让我印象深刻。我多年来一直在多个JS框架和ExtJS中进行开发，尽管它具有一些令人惊叹的小部件，但要完成最简单的事情却非常令人沮丧。其他人有这种经历吗？

Answer 1

问题出在试图将string传递到SegmentedButton的地方，期望的值应该是number。因此，要解决此问题，您只需将value={'28800'}替换为value={28800}。