Блог

Главная - Вопросы по программированию - Действие сборника рассказов не регистрируется

Действие сборника рассказов не регистрируется

#reactjs #storybook

#reactjs #сборник рассказов

Вопрос:

Я разрабатываю компонент для проекта React в сборнике рассказов, но нажатие кнопки ничего не регистрирует на панели действий. Почему действие не регистрируется?

Истории…

 // Button.stories.js
import React from 'react'
import Button from '../components/Button'

export default {
  title: 'Button',
  argTypes: { onClick: { action: 'clicked' } }
}

const Template = args => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Button'
}

и компонент…

 // Button.jsx
function Button() {
  const clickHandler = () => {
    alert('!')
  }

  return (
    <button className='button' onClick={clickHandler}>
      Button
    </button>
  )
}

Комментарии:

1. Я не вижу ничего плохого в коде истории, вы уверены, что используете onClick метод внутри своего компонента button?

2. Да. Это работает (срабатывает предупреждение), но ничего не регистрируется. Я обновил вопрос, чтобы включить код компонента.

Ответ №1:

Вы не передаете onClickHandler компоненту кнопки, вставляете {onClickHandler} аргументы кнопки

А затем передайте его в onClick prop в отображаемом элементе DOM.

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

Комментарии:

1. Можете ли вы предоставить фрагмент кода?

Ответ №2:

Если вы не хотите обрабатывать все действия вручную, используйте argTypesRegex so, чтобы они выводились автоматически.

Автоматическое сопоставление аргументов

Другой вариант — использовать параметр для сопоставления всех типов аргументов, которые соответствуют определенному шаблону. Следующая конфигурация автоматически создает действия для каждого в argType (которые вы можете либо указать вручную, либо вывести автоматически).

Источник

preview.js/ts позволяет записывать регулярные выражения

Примеры:

 // preview.ts
export const parameters = {
  actions: { argTypesRegex: '^on.*' }
};
 
 // preview.js
export default {
  parameters: { actions: { argTypesRegex: '^on.*' } },
};
Метки: