时间戳

首页 > 解决方案 > 单击时返回 null 而不是对象

reactjs - 单击时返回 null 而不是对象

问题描述

我想这真的很基本。我正在尝试将 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')}
    />
);

所以现在点击故事书中的这段代码，我会得到空值，我正在寻找一个对象。

标签： reactjscallbackstorybook

解决方案

我可以看到的潜在问题之一是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 的方式就有问题。就像缺少上下文一样。

推荐阅读