Попытка использовать FileReader с typescript и react

#reactjs #typescript #filereader

#reactjs #typescript #filereader

Вопрос:

 import { useRecoilValue } from 'recoil';
 

импортируйте { EventHandler, ReactEventHandler, useState } из ‘react’;
импортируйте { taxonomySelectorName } из ‘../../../../../ состояние/заголовок.состояние’;
импортируйте { TAXONOMY_SELECTOR, HEADER_TESTS } из ‘../../../../../ constants/header.constants’;
импортировать useMandatoryOptionsServices из ‘../../../../../ услуги/Обязательные опции.услуги’;
импортировать { параметры} из ‘../../../../../ constants/mandatoryOptions.constants’;
импортировать { IOption } из ‘../../../../../ типы/Обязательные варианты/mandatoryOptions.types’;
импортировать * как стиль из ‘./mandatoryOption.styles’;

const MandatoryOptions = () => { const isTaxonomyDefaultName = useRecoilValue(taxonomySelectorName) === TAXONOMY_SELECTOR.PLEASE_SELECT_TAXONOMY; const { setModalAction, handelMandatoryOptionActions } = useMandatoryOptionsServices(); const [nameAndContent, setNameAndContent] = useState({ имя: «, содержимое: » });

 const handleClick = (type: string) => {
    handelMandatoryOptionActions();
    setModalAction(type);
};

const importFile = () => {
    document.getElementById('1')?.click();
};

const handleChangeFile = (e: any) => {
    console.log(e);
    const files = e.target.files;
    console.log(files);
    const reader = new FileReader();
    reader.onload = (r) => {
        console.log(r);
    };
    reader.readAsDataURL(files[0]);
};

return (
    <>
        <Style.Hr />
        <Style.MandatoryOptionsContainer data-testid={HEADER_TESTS.MANDATORY_OPTIONS}>
            {options.map((option: IOption, index) => (
                <Style.MandatoryOption
                    onClick={isTaxonomyDefaultName ? undefined : () => handleClick(option.functionType)}
                    key={index}
                    isTaxonomyDefaultName={isTaxonomyDefaultName}
                    data-testid={option.dataTestId}
                >
                    {option.content}
                </Style.MandatoryOption>
            ))}
            <Style.MandatoryOption
                onClick={isTaxonomyDefaultName ? undefined : () => importFile()}
                key={'import csv'}
                isTaxonomyDefaultName={isTaxonomyDefaultName}
                data-testid={'import csv'}
            >
                import csv
            </Style.MandatoryOption>
            <input type="file" id="1" onChange={(e) => handleChangeFile(e)} />
        </Style.MandatoryOptionsContainer>
    </>
);
 

};

экспортируйте обязательные параметры по умолчанию;

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

Кто-нибудь может мне помочь, пожалуйста? Спасибо!

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

1. Похоже, это должно сработать, мне нужно больше деталей.

2. @fixiabis Можете ли вы, пожалуйста, сказать мне, какие детали вам нужны?

3. Код компонента.

4. @fixiabis Я добавляю код к вопросу

5. Ключевой момент здесь, верно? codesandbox.io/s/kind-wildflower-w8mo4?file=/src/App.js