修改故事书的反应子组件状态

Question

我有一个要添加到故事书中的react组件。它具有子组件，这些子组件的组件状态会更改组件的显示方式。我想设置该组件状态以显示在我的故事书中。实现此目的的最佳方法是什么？

class ParentComponent extends PureComponent<ParentComponentProps> {
  render() {
    return (
      <ChildComponent />
    )
  }
}

class ChildComponent extends PureComponent<ChildComponentProps> {
  constructor(props) {
    super(props);

    this.handleOnBlur = this.handleOnBlur.bind(this);

    this.state = {
      isValid: true
    };
  }

  handleOnBlur() {
    this.setState({
      isValid: isInputValid()
    });
  }

  render() {
    return (
      <TextField
          placeholder="eg. 12345"
          validationMessage={'not a valid input'}
          isInvalid={this.state.isValid}
          onBlur={this.handleOnBlur}
        />
    )
  }
}

此时的Storybook代码看起来像这样

import React from 'react';
import { Provider } from 'react-redux';
import ParentComponent from './ParentComponent';

export default { title: 'UpdateChildComponent' };

export const FieldValidationShowing = (state) => {
  const { store, updateState } = mockStore;
  updateState(state);

  return (
    <Provider store={store}>
      <ParentComponent />
    </Provider>
  );
};

上面的代码是我在做什么的示例。