Javascript 如何更新故事书中的组件道具

我正在使用

故事书

（）独立地玩我的组件。我想模拟所有的流量循环（在完整的应用程序中，它是在

redux

的帮助下完成的），并使用故事中的一个简单对象更新属性，但我缺少了一些东西

  storiesOf('Color picker', module).add('base', () => {
    let colorPickerState = {
      changeColor: function(data) {
        this.color = data.color
      },
      color: '#00aced'
    }
    return (
      <ColorPicker
        name="color"
        onChange={colorPickerState.changeColor.bind(colorPickerState)}
        value={colorPickerState.color}
      />
    )
  }

storiesOf（'Color picker'，module）。添加（'base'，（）=>{
让colorPickerState={
changeColor:函数（数据）{
this.color=data.color
},
颜色：“#00aced”
}
返回(
)
}

我希望在调用

onChange

时更新

的
值
属性；我可以看到
colorPickerState.color
的值被正确更新，但组件不会重新渲染

我缺少什么？
您可以使用一个插件来实现这一点：

因此，您的代码如下所示：

import { State, Store } from '@sambego/storybook-state';

const store = new Store({
  value: '#00aced',
});

storiesOf('Color picker', module).add('base', () => {
  return (
    <State store={store}>
      <ColorPicker
        name="color"
        onChange={(data) => store.set({ value: data.color })}
      />
    </State>
  )
}

从'@sambego/storybook State'导入{State，Store}；
常量存储=新存储({
值：“#00aced”，
});
storiesOf（'Color picker'，module）.添加（'base'，（）=>{
返回(
store.set（{value:data.color}）}
/>
)
}
您可以编写一个虚拟组件，该组件将在其中呈现真实故事组件，然后您可以获得该虚拟组件的
状态
属性

在下面的例子中，我使用了一个滑块组件的故事

stories.addDecorator（带旋钮）
.add（'滑块'，（）=>{
//创建包裹滑块并允许以下状态的虚拟组件：
类StoryComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：this.props.value | | 0，
}
}
onValueChange=value=>this.setState（{value}）
render（）{
常量道具={
…这是道具，
onValueChange:this.onValueChange，//我会尝试使用react中的
useState
钩子-通过其设置器更新状态值似乎有重新呈现故事书组件的效果

我遇到了一个类似的问题，我的数据输入表单的状态和事件处理（包括复杂的验证）是在全局范围内完成的，在组件树的某个级别上。通过编写一个简单的事件处理程序传递给我的组件，我能够得到这个组件及其复杂验证的工作演示

请注意，我的代码是用Typescript编写的。我对React这个世界相当陌生，所以这可能并不完美

//其他地方定义的内容：IComponentProps、IValidationResult、IFormInput、EntryForm
//useState和useCallbac来自react
导出常量MyComponentDemo=（args:IComponentProps）=>{
const[validations，setValidations]=useState（[]）；
常量[theForm，setTheForm]=使用状态(
{
…args.formValues，
//在此处设置其他有趣的默认表单值
}
);
const dummyValidationMethod=useCallback（（形式：IFormInput）=>{
let验证：IValidationResult[]=[]；
//使用表单中的数据进行验证
设置验证（验证）；
抵消形式（形式）；
}, []);
返回(
);
};
不使用第三方软件包怎么样？
ColorPicker
如何使用
状态下的
存储
？（不清楚）@vsync通过传递store={store}声明我可能错了，但我认为@vsync问的是，在ColorPicker组件中，如何使用存储在存储中的
值
？即使他们没有问这个问题，我也很想知道答案？从哪里导入“storybookWrapper”来自？@huseyin39-我的错误，我应该删除它，因为它只与我的实现相关（当时）[答案更新]
stories.addDecorator(withKnobs)
    .add('Slider', () => {
        // create dummy component that wraps the Slider and allows state:
        class StoryComp extends React.Component {
            constructor( props ){
                super(props);

                this.state = {
                    value : this.props.value || 0,
                }
            }

            onValueChange = value => this.setState({ value })

            render(){
                const props = {
                    ...this.props, 
                    onValueChange:this.onValueChange, // <--- Reason "StoryComp" is needed
                    value:this.state.value            // <--- Reason "StoryComp" is needed
                }

                return <Slider {...props} />
            }
        }

        // knobs (customaziable props)
        const widthKnobOptions = {
            range : true,
            min   : 200,
            max   : 1500,
            step  : 1
        }

        const props = {
            value : number('value', 200000),
            min   : number('min', 100),
            step  : number('step', 1000),
            max   : number('max', 1000000),
            width : number('width', 700, widthKnobOptions)
        }

        return <StoryComp {...props} />
    }
);