При нажатии возвращает ноль вместо объекта - PullRequest
Новая
       5

При нажатии возвращает ноль вместо объекта

2 голосов
/ 28 марта 2020

Это действительно основа c Я думаю. Я пытаюсь добавить обратный вызов onClick к своему сценарию, и мне кажется, что мне не хватает значения, которое бы отвечало за поиск фактического элемента.

Основной сценарий 

import React from 'react';
import { CSVLink } from 'react-csv';
import { data } from 'constants/data';
import GetAppIcon from '@material-ui/icons/GetApp';
import PropTypes from 'prop-types';

const handleClick = (callback) => {
    callback(callback);
};

const DownloadData = (props) => {
    const { callback } = props;
    return (
        <>
            <CSVLink
                data={data}
                onClick={() => handleClick(callback)}
            >
                <GetAppIcon />
            </CSVLink>
        </>
    );
};

DownloadData.propTypes = {
    callback: PropTypes.func.isRequired,
};

export default DownloadData;

Код сборника рассказов 

import React from 'react';
import DownloadData from 'common/components/DownloadData';
import { data } from 'constants/data';
import { action } from '@storybook/addon-actions';

export default {
    title: 'DownloadData',
    component: DownloadData,
};

export const download = () => (
    <DownloadData
        data={data}
        callback={action('icon-clicked')}
    />
);

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

1 Ответ

1 голос
/ 28 марта 2020

Одна из потенциальных проблем, с которыми я могу столкнуться, заключается в том, что ваша функция handleClick сохраняется в памяти, когда вы импортируете компонент. Это означает, что вы сохраняете ссылку на то, чего не существует, и ожидаете использовать его при рендеринге компонента с помощью функции обратного вызова.

Каждый экземпляр компонента должен иметь свою собственную функцию. Чтобы исправить это, переместите объявление функции внутри компонента. Например: 

const Foo = ({ callback }) => {
  // handleClick needs to be inside here
  const handleClick = callback => {
    console.log("clicked");
    callback(callback);
  };

  return <div onClick={() => handleClick(callback)}>Click me!</div>;
};

Проверьте этот пример .

Если это не решит вашу проблему, значит, что-то не так с вашей реализацией Storybook. Как отсутствующий контекст.

...