Как использовать сборник рассказов с компонентом React Statefull? - PullRequest
Новая
       12

Как использовать сборник рассказов с компонентом React Statefull?

0 голосов
/ 13 октября 2019

Я уже некоторое время использую компоненты React statefull, особенно в формах и других типах взаимодействия с пользователем. Типичный входной компонент, который я использую, выглядит следующим образом: 

import React, { Component } from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";

import { theme } from "../theme";

class Input extends Component {
    static propTypes = {
        onChange: PropTypes.func,
        label: PropTypes.string,
        errorMessage: PropTypes.string,
        value: PropTypes.any
    };

    state = {
        errorMessage: null,
        value: null
    };

    componentWillMount = () => {
        this.setState({
            errorMessage: this.props.errorMessage,
            value: this.props.value
        });
    };

    componentWillReceiveProps = nextProps => {
        this.setState({
            errorMessage: nextProps.errorMessage,
            value: nextProps.value
        });
    };

    handleChange = event => {
        alert("handleChange!")

        this.setState({
            errorMessage: null,
            value: event.taget.value
        });

        if (this.props.onChange) this.props.onChange(event.target.value);
    };

    render = () => {
        let { label } = this.props;

        let { errorMessage, value } = this.state;
        alert("Render")

        let err = null;
        if (errorMessage) err = <label>{errorMessage}</label>;

        return (
            <ThemeProvider theme={theme}>
                <label>{label}</label>
                <input
                    onChange={this.handleChange}
                    type={"text"}
                    value={value}
                />
                {err}
            </ThemeProvider>
        );
    };
}

export default Input;

Я сейчас перемещаю эти компоненты в Сборник рассказов. Вот вышеупомянутые Input первые истории компонента: 

import React from "react";
import { storiesOf } from "@storybook/react";

import Input from "./Input";

const noOp = event => {
    event.preventDefault();
};


storiesOf("Forms/Input", module).add("errorMessage", () => (
    <Input
        label={"Insert Data"}
        onChange={noOp}
        errorMessage={"Error Message Here!"}
    />
));

Я заметил, что сборник рассказов не вызывает рендеринг при изменении состояния компонента (alert(Render) вызывается только один раз и не вызываетсякогда я изменяю состояние на onChange, даже если он вызывается.

Обнаруживает, что Storybook не поддерживает изменения состояния, как я обычно это делаю ...

Как правильно использовать statefullкомпоненты (например, React Forms ) внутри сборника рассказов?

Что нужно изменить в моем простом примере, чтобы он работал внутри сборника рассказов?

...