reactjs - Storybook addon-knobs 回调函数旋钮

Question

我在 Storybook插件旋钮中有一种情况，我需要一个旋钮来更改回调函数。

我想formatValue成为一个旋钮，但我不确定如何（以及是否）可以做到这一点。

这是组件的故事：

import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text, number, object } from '@storybook/addon-knobs';

import storybookWrapper from '../../storybook/StorybookWrapper';
import Slider from './Slider';

stories.addDecorator(withKnobs)
    .add('Slider', () => {
        const props = {
            name        : 'foo',
            value       : number('value', 200000),
            min         : number('min', 100),
            step        : number('step', 1000),
            max         : number('max', 1000000),
            // I want the below to be a knob:
            formatValue : v => '$ ' + Number(v).toLocaleString(undefined, {maximumFractionDigits:2})
        };

        const WrappedComponent = storybookWrapper(Slider, props);

        return <WrappedComponent />
    }
);

谢谢！

标签： reactjsstorybook

Answer 1

现在我这样“解决”了它：（
仍然没有简单的方法来配置toLocaleString()部件）

function formatValue(v) {
    return text('prefix', '$ ') + Number(v).toLocaleString(undefined, {maximumFractionDigits:2}) + text('suffix', '')
}

const props = {
     name        : 'loanRequest',
     value       : number('value', 200000),
     min         : number('min', 100),
     step        : number('step', 1000),
     max         : number('max', 1000000),
     formatValue
};