Storybook addon-knobs 回调函数旋钮答案

【问题标题】：Storybook addon-knobs callback function knobStorybook addon-knobs 回调函数旋钮
【发布时间】：2019-06-02 00:22:33
【问题描述】：

我在 Storybook addon-knobs 中有一个情况，我需要一个旋钮来更改回调函数。

我希望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 />
    }
);

谢谢！

【问题讨论】：

标签： reactjs storybook

【解决方案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
};

【讨论】：