答案 0 :(得分：3)
您可以使用插件来实现此目的：https://github.com/Sambego/storybook-state
所以你的代码看起来像是：
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>
)
}
答案 1 :(得分：2)
您可以编写一个 dummy-component 并将其呈现在其中的真实故事组件，然后获得该 dummy-component 的{{1} }属性。
在以下示例中，我在 Slider 组件的故事中使用knobs addon
state答案 2 :(得分：1)
我会尝试使用 react 中的 useState 钩子 - 通过其 setter 更新状态值似乎具有重新渲染故事书组件的效果。
我遇到了类似的问题，我的数据输入表单的状态和事件处理（包括复杂的验证）是在全局范围内完成的，在组件树的上一级。通过编写一个简单的事件处理程序传递给我的组件，我能够获得该组件的工作演示及其复杂的验证。
请注意，我的代码是在 Typescript 中的。我对 React 世界还很陌生，所以这可能并不完美。
// Things defined elsewhere: IComponentProps, IValidationResult, IFormInput, EntryForm
// useState and useCallbac comes from react
export const MyComponentDemo = (args: IComponentProps) => {
const [validations, setValidations] = useState<IValidationResult[]>([]);
const [theForm, setTheForm] = useState<IFormInput>(
{
...args.formValues,
// set other interesting default form values here
}
);
const dummyValidationMethod = useCallback((form: IFormInput) => {
let validations : IValidationResult[] = [];
// Do validation using data from form
setValidations(validations);
setTheForm(form);
}, []);
return (
<EntryForm
{...args}
formValues={theForm}
onValidation={dummyValidationMethod}
validatedLocations={validations}
/>
);
};