Javascript 如何从被调用的组件获取变量

我有一个问题：我有我的主类Input.js。用户可以选择一张照片并上传。问题是我想检查用户按下按钮时是否上传了照片。例如，我可以将图片作为道具从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

import React，{useState，useffect}来自“React”；
从'react bootstrap tagsinput'导入{InputTags}；
导入'react bootstrap tagsinput/dist/index.css'；
导入“/Input.css”；
从“/Profilepic”导入Profilepic；
常量输入=（）=>{
常量checkAll=（）=>{
//从Profilepic.js调用预览
}
返回(
斯皮切恩&韦特酒店
);
}
导出默认输入

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;

import React，{useState}来自“React”；
从“/Pic.js”导入{Pic}；
常量Profilpic=（）=>{
const[preview，setPreview]=useState（null）；
const[isPreview，setIsPreview]=useState（false）；
const fileSelectedHandler=（事件）=>{
试一试{
console.log（event.target.files[0]）；
如果（event.target.files[0]。大小>70001680）{
警告（“文件太大了！我是Samys Dick”）；
}否则{
让img=URL.createObjectURL（event.target.files[0]）；
setPreview（img）；
setIsPreview（true）；
}
}
捕捉（错误）{
}
};
返回(
{预览(
) : (
)}
);
};
导出默认profic；

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>
  );
};

从“React”导入React；
导入“/Photo.css”；
常量样式=[“btn—主”、“btn—大纲”、“btn—测试”]；
常量大小=[“btn-中等”，“btn-大”]；
导出常量Pic=（{preview}）=>{
//常量checkButtonStyle=样式。包括（buttonStyle）？buttonStyle:样式[0]；
//常量checkButtonSize=大小。包括（buttonSize）？buttonSize:大小[0]；
//Püsh代表萨米
返回(
盈利银行
);
};

您可以使用。这需要一些包装材料

剖面图

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，useffect，useRef}来自'React'；
从“/Profilepic”导入Profilepic；
常量输入=（）=>{
const profilePicRef=useRef（）；
常量checkAll=（）=>{
//访问档案picref.current.isPreview
}
返回(
...
斯皮切恩&韦特酒店
...
);
}

将回调从父组件传递到子组件，以便子组件调用并将数据传递回父组件。看：@DrewReese谢谢你的帮助！我很困惑…：/你能给我举一个例子吗？我对这种情况感到抱歉，当然。当在

Input.js

中调用方法

checkAll（）

时，我想将

isPreview

从子组件

Profileepic.js

传递回

Input.js

，具体是什么！！！不幸的是，有一个错误

TypeError:Assignment to constant variable.

at

Profilepic=forwardRef（Profilepic）。我真的很感激你帮助我！！我欠你的。@Kazim有趣的是，我在遵循官方文件中使用的语法/模式。我将答案改为直接导出
forwardRef（Profilepic）
。我怀疑这不会有那个问题。@Kazim我想所有的部分都在那里，但我可能需要创建一个示例演示代码沙盒来测试它。但是已经很晚了，所以这得等到明天早上。我会用任何更新打电话给你。@Kazim哦，你能用吗？伟大的
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>
  );
}