Storybook: Die Benutzeroberfläche des Knopfobjekts verschwindet beim Ändern von Werten

Erstellt am 25. Feb. 2020 · 2Kommentare · Quelle: storybookjs/storybook

Beschreibe den Fehler

Wenn Sie die Werte von object ändern, die durch @storybook/addon-knobs gerendert werden, verschwindet die Benutzeroberfläche.

Reproduzieren

Erstellen Sie mit Addon- Reglern ein object
npm run storybook
Ändern Sie die object -Werte auf der Registerkarte "Storybook-Regler"
Beachten Sie, dass object verschwindet

Erwartetes Verhalten

Die object -Werte sollten in der Storybook-Benutzeroberfläche bearbeitet werden können, ohne dass der Knopf verschwindet.

Screenshots

storybook-knobs-object-bug

Code Ausschnitte

Arbeitsbeispiel hier: https://github.com/benjarwar/storybook-knobs-object-test

Klonen Sie das Repo
npm i
npm run storybook

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v8.15.1/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

knobs question / support

Quelle

benjarwar

👍1

Hilfreichster Kommentar

Das Problem hierbei ist, dass Sie den Objektknopf nicht in der Story-Funktion erstellen. Wenn Sie Ihr Beispiel in so etwas ändern, sollten Sie bereit sein:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer am 26. Feb. 2020

👍5

Alle 2 Kommentare

Das Problem hierbei ist, dass Sie den Objektknopf nicht in der Story-Funktion erstellen. Wenn Sie Ihr Beispiel in so etwas ändern, sollten Sie bereit sein:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer am 26. Feb. 2020

👍5

Ah, danke @jonspalmer. Das hat in der Tat den Trick getan und macht Sinn.

benjarwar am 26. Feb. 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Storybook: Die Benutzeroberfläche des Knopfobjekts verschwindet beim Ändern von Werten

Hilfreichster Kommentar

Alle 2 Kommentare

Verwandte Themen