如何从被调用的组件中取回变量

Question

我有一个问题：我有我的主要 class Input.js。用户可以 select 一张照片并上传。问题是我想检查用户按下按钮时是否上传了照片。例如，我可以将 Profilepic.js 到 Pic.js 的图片作为道具。但是我怎样才能取回变量呢？例如，我想在 Profilepic.js 中设置变量，当用户按下按钮时，应该执行 onClick() 方法。在此方法内部，它应该检查变量 isPreview 具有哪个值。如果用户还没有上传图片，应该有一个标签告诉他必须上传图片才能继续。

Input.js

import React, { useState, useEffect } from 'react';
import { InputTags } from 'react-bootstrap-tagsinput';
import 'react-bootstrap-tagsinput/dist/index.css';
import './Input.css';
import Profilepic from './Profilepic';




const Input = () => {



    

  const checkAll = () => {
   
     // Call Preview from Profilepic.js
  }
  
  return (

    <div className="body-container">
            <Profilepic></Profilepic>
                <div className="row gutters">
                  <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div className="text-right">
                      <button type="button" id="submit" name="submit" className="btn btn-primary" onClick={checkAll}>Speichern &amp; Weiter <i class="fas fa-paper-plane"></i></button>
                    </div>
                  </div>
                </div>
    </div>
  );
}

export default Input

Profilepic.js

import React, { useState } from "react";
import { Pic } from "./Pic.js";

const Profilpic = () => {
  const [preview, setPreview] = useState(null);
  const [isPreview, setIsPreview] = useState(false);

  const fileSelectedHandler = (event) => {
    try {
      console.log(event.target.files[0]);
      if (event.target.files[0].size > 70001680) {
        alert("File is too big! Wie Samys Dick");
      } else {
        let img = URL.createObjectURL(event.target.files[0]);
        setPreview(img);
        setIsPreview(true);
      }
    }
    catch (err) {

    }
  };



  return (
    <div>
      {preview ? (
        <div>
          <label htmlFor="myInput">
            <Pic preview={preview}></Pic>
          </label>
          <input
            id="myInput"
            style={{ display: "none" }}
            type={"file"}
            onChange={fileSelectedHandler}
          />
        </div>
      ) : (
        <div>
          <label htmlFor="myInput">
            <i className="fas fa-user-circle"></i>
          </label>
          <input
            id="myInput"
            style={{ display: "none" }}
            type={"file"}
            accept=".png,.jpg,.jpeg, .jfif"
            onChange={fileSelectedHandler}
          />
        </div>
      )}
    </div>
  );
};

export default Profilpic;

Pic.js

import React from "react";
import "./Photo.css";

const STYLES = ["btn--primary", "btn--outline", "btn--test"];

const SIZES = ["btn--medium", "btn--large"];

export const Pic = ({ preview }) => {
  //const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
  //const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
  // Püsh for Samy
  return (
    <div class="profilepic">
      <img
        class="profilepic__image"
        src={preview}
        width="120"
        height="120"
        alt="Profibild"
      />
      <div class="profilepic__content">
        <span class="profilepic__icon">
          <i class="fas fa-camera"></i>
        </span>
        <span class="profilepic__text">Profilbild ändern</span>
      </div>
    </div>
  );
};

Description of the Problem

Answer 1

可以使用useImperativeHandle。这需要对

进行一些包装

个人资料图片

import React, { forwardRef, useImperativeHandle, useState } from "react";
import { Pic } from "./Pic.js";

function Profilepic(props, ref) {
  const [preview, setPreview] = useState(null);
  const [isPreview, setIsPreview] = useState(false);

  useImperativeHandle(
    ref,
    () => ({ isPreview }),
    [isPreview]
  );

  ...

  return (
    ...
  );
};

export default forwardRef(Profilepic);

输入

import React, { useState, useEffect, useRef } from 'react';
import Profilepic from './Profilepic';

const Input = () => {
  const profilePicRef = useRef();

  const checkAll = () => {
    // access profilePicRef.current.isPreview
  }
  
  return (
    <div className="body-container">
      <Profilepic ref={profilePicRef} />
      ...
        <button
          type="button"
          id="submit"
          name="submit"
          className="btn btn-primary"
          onClick={checkAll}
        >
          Speichern &amp; Weiter <i class="fas fa-paper-plane" />
    </button>
      ...
    </div>
  );
}

如何从被调用的组件中取回变量

How to get a variable back from a called component

javascript

reactjs

react-props