0

我正在使用 ExtReact，并且我有一个 SegmentedButton。基于厨房水槽示例，我应该能够为 SegmentedButton 提供一个值，但是当我尝试使用以下代码时出现错误

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

这是代码，我还包括了 Sencha fiddle

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

这是小提琴

如果我删除“值”选项，页面将呈现，但按钮集将没有任何选择。为什么会抛出错误？

顺便说一句，我对 ExtJS 和 ExtReact 真的很不满意。多年来，我一直在开发多个 JS 框架和 ExtJS，虽然它有一些令人惊叹的小部件，但完成最简单的事情却令人难以置信的沮丧。有没有其他人有这种经验？

4

1 回答 1

0

您可以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

于 2020-05-06T08:08:46.953 回答