Я пытаюсь использовать реагировать окончательную форму с компонентом, который имеет крючок useDropzone - PullRequest
Новая
       40

Я пытаюсь использовать реагировать окончательную форму с компонентом, который имеет крючок useDropzone

0 голосов
/ 18 февраля 2020

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

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

import cx from 'classnames';
import PropTypes from 'prop-types';
import { useDropzone } from 'react-dropzone';
import styles from './InputImage.less';
import Image from '../Icons/Image';
import Delete from '../Icons/Delete';
import Button from '../Button';
import Label from '../Label';

const InputImage = ({ className, label, recommendation, input }) => {

    const [file, setFile] = useState();

    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
        if (acceptedFiles.length === 1) {
            setFile(Object.assign(
                acceptedFiles[0],
                { preview: URL.createObjectURL(acceptedFiles[0]) },
            ));
        } else if (rejectedFiles.length > 0) {
            alert('you can only add image');
        } else {
            alert('you cant add more than one image');
        }
    });
    const { getRootProps, getInputProps, open } = useDropzone({ onDrop, accept: 'image/jpeg, image/png' });


    const removeFile = () => {
        setFile();
    }

    useEffect(() => () => {
        if (file) URL.revokeObjectURL(file.preview);
    }, [file]);

    const thumb = file ? (
        <div className={cx(styles.uploadedIconPreview)}>
            <div className={cx(styles.previewContainer)}>
                <div className={cx(styles.delete)} role="button" onClick={removeFile} tabIndex={0}>
                    <Delete />
                </div>
                <img className={cx(styles.preview)} src={file.preview} />
            </div>
        </div>
    ) : '';


    return (
        <div className={cx(styles.inputImage, className)}>
            <Label className={cx(styles.label)}>{label}</Label>
            <div>
                {thumb}
                <div
                    {...getRootProps()}
                    className={cx(styles.uploadedIconPreview, {
                        [styles.hide]: file,
                    })}
                >
                    <Image />
                    <input {...getInputProps()} {...input} />
                    {console.log(getInputProps())}
                    {console.log(input)}
                </div>
                <Button onClick={open} className={cx(styles.button)} secondary> {file ? 'Replace' : 'Add'} </Button>
            </div>
            {recommendation == null ? '' : <div className={cx(styles.recommendation)}> {recommendation}  </div> }
        </div>
    );
};

InputImage.propTypes = {
    className: PropTypes.string,
    label: PropTypes.string,
    recommendation: PropTypes.string,
    input: PropTypes.object,
};

export default InputImage;
...