Question

在下面的示例中，如何将imageAsUrl.imgUrl从子组件（ImageUpload）传递到父组件（UpdateCard）。

儿童组件

import React, { useState, useEffect } from 'react';
import { storage } from '../firebase';

const ImageUpload = () => {
  const allInputs = { imgUrl: '' };
  const [imageAsUrl, setImageAsUrl] = useState(allInputs);
  const [image, setImage] = useState(null);

  const handleChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  useEffect(() => {
    if (image) {
      const uploadTask = storage.ref(`images/${image.name}`).put(image);

      uploadTask.on(
        'state_changed',
        (snapshot) => {},
        (error) => {
          console.log(error);
        },
        () => {
          storage
            .ref('images')
            .child(image.name)
            .getDownloadURL()
            .then((fireBaseUrl) => {
              setImageAsUrl((prevObject) => ({
                ...prevObject,
                imgUrl: fireBaseUrl,
              }));
            });
        }
      );
    }
  }, [image]);

  return (
    <>
      <label className='custom-file-upload'>
        <input type='file' onChange={handleChange} />
      </label>
      <img src={imageAsUrl.imgUrl} alt='sample' />
    </>
  );
};

export default ImageUpload;

PARENT组件

import React, { useState } from 'react';
import firebase from '../firebase';
import ImageUpload from './ImageUpload';

const UpdateCard = ({ card }) => {
  const [originalText, setOriginalText] = useState(card.originalText);
  const [translatedText, setTranslatedText] = useState(card.translatedText);

  const onUpdate = () => {
    const db = firebase.firestore();
    db.collection('FlashCards')
      .doc(card.id)
      .set({ ...card, originalText, translatedText });

    timeOutScroll();
  };

  return (
    <>
      <div>
        {card.imageURL ? (
          <img src={card.imageURL} alt='' className='img' />
        ) : (
          <textarea
            className='upload-textarea'
            value={originalText}
            onChange={(e) => {
              setOriginalText(e.target.value);
            }}
          />
        )}
        <ImageUpload />
      </div>

      <textarea
        value={translatedText}
        onChange={(e) => {
          setTranslatedText(e.target.value);
        }}
      />
      <button onClick={onUpdate}>Update</button>
    </>
  );
};

export default UpdateCard;

Answer 1

在父级内部，您可以将回调函数定义为要在子级内部调用的prop ref。

const ImageUpload = ({getURLtoParent}) =>{                       <--------------------
    const [imageAsUrl, setImageAsUrl] = useState(allInputs);

    useEffect(() => {
     uploadTask.on(
         ..............
         ...
     );

     if(imageAsUrl.imgUrl !== '')
         getURLtoParent(imageAsUrl.imgUrl)           <-----------------------

    },[image])

}

const UpdateCart = () => {
    const[imgURL,setimgURL] = useState(null)

    return (
    ......
    <ImageUpload getURLtoParent={ (url) => setimgURL(url) } />      <----------------
    .........
    )

}

React Hooks-如何将道具从子组件传递到父组件

1 个答案: