React父組件需要子函式回傳資料

我想我需要一個回呼函式，但不理解給定父組件呼叫子函式的正確語法。

這是精簡的父組件，后跟函式 FilesUpload。我需要從子組件回傳的 File.Name 和父組件中的 setState({fileName}) 。

希望對于知道如何做到這一點的人來說，這是顯而易見的。預先感謝您的解決方案。搶

...

//Stripped down ParentComponent.jsx
import React, { Component } from 'react'
import FilesUpload from "../Services/FilesUpload";

class ParentComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            fileName: null
        }
        this.changefileNameHandler = this.changefileNameHandler.bind(this);
    }

    changefileNameHandler= (event) => {
        this.setState({fileName: event.target.value});
    }

    componentDidMount(){
    }
   
    render() {
        return (
            <div>
                <td>this.state.fileName </td>
                <FilesUpload onUpdate={this.changefileNameHandler}/>
            </div>
        )
    }
}
export default ParentComponent


//functional service FilesUpload.js
import React, { useState, useEffect, useRef } from "react";
import UploadService from "../Services/FileUploadService";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


const UploadFiles = () => {
  const [selectedFiles, setSelectedFiles] = useState(undefined);
  const [progressInfos, setProgressInfos] = useState({ val: [] });
  const [message, setMessage] = useState([]);
  const [fileInfos, setFileInfos] = useState([]);
  const progressInfosRef = useRef(null)

  useEffect(() => {
    UploadService.getFiles().then((response) => {
      setFileInfos(response.data);
    });
  }, []);

  const selectFiles = (event) => {
    setSelectedFiles(event.target.files);
    setProgressInfos({ val: [] });
  };

  const upload = (idx, file) => {
    let _progressInfos = [...progressInfosRef.current.val];
    return UploadService.upload(file, (event) => {
      _progressInfos[idx].percentage = Math.round(
        (100 * event.loaded) / event.total
      );
      setProgressInfos({ val: _progressInfos });
    })
      .then(() => {
        toast.info(file.name   " Uploaded")
        setMessage((prevMessage) => ([
          ...prevMessage,
          "Uploaded the file successfully: "   file.name,
        ]));
      })
      .catch(() => {
        _progressInfos[idx].percentage = 0;
        setProgressInfos({ val: _progressInfos });

        setMessage((prevMessage) => ([
          ...prevMessage,
          "Could not upload the file: "   file.name,
        ]));
      });
  };

  const uploadFiles = () => {
    const files = Array.from(selectedFiles);

    let _progressInfos = files.map(file => ({ percentage: 0, fileName: file.name }));

    progressInfosRef.current = {
      val: _progressInfos,
    }

    const uploadPromises = files.map((file, i) => upload(i, file));

    Promise.all(uploadPromises)
      .then(() => UploadService.getFiles())
      .then((files) => {
        setFileInfos(files.data);
      });

    setMessage([]);
  };

  return (
    <div>
      {progressInfos && progressInfos.val.length > 0 &&
        progressInfos.val.map((progressInfo, index) => (
          <div className="mb-2" key={index}>
            <span>{progressInfo.fileName}</span>
            <div className="progress">
              <div
                className="progress-bar progress-bar-info"
                role="progressbar"
                aria-valuenow={progressInfo.percentage}
                aria-valuemin="0"
                aria-valuemax="100"
                style={{ width: progressInfo.percentage   "%" }}
              >
                {progressInfo.percentage}%
              </div>
            </div>
          </div>
        ))}

      <div className="row my-3">
        <div className="col-8">
          <label className="btn btn-default p-0">
            <input type="file" multiple onChange={selectFiles} />
          </label>
        </div>

        <div className="col-4">
          <button
            className="btn btn-success btn-sm"
            disabled={!selectedFiles}
            onClick={uploadFiles}
          >
            Upload
          </button>
        </div>
      </div>
      {message.length > 0 && (
        <div className="alert alert-secondary" role="alert">
          <ul>
            {message.map((item, i) => {
              return <li key={i}>{item}</li>;
            })}
          </ul>
        </div>
      )}

      <div className="card">
        {/* <div className="card-header">List of Files</div> */}
        <ul className="list-group list-group-flush">
          {!fileInfos &&
            fileInfos.map((file, index) => (
              <li className="list-group-item" key={index}>
                {/* <a href={file.url}>{file.name}</a> */}
              </li>
            ))}
        </ul>
      </div>
      <ToastContainer position="top-center" autoClose={1000}/>
    </div>
  );
};

export default UploadFiles;

...

uj5u.com熱心網友回復：

我不太確定我完全理解你的問題，但是你想把這個changefileNameHandler函式作為道具傳遞給你的FilesUpload功能組件嗎？

在這種情況下，您可以添加 props 作為引數：

const UploadFiles = (props) => { ...

并在任何需要的地方呼叫它：

props.onUpdate(event)

uj5u.com熱心網友回復：

@davidsz 您的最終更改奏效了。將解決方案集成到我的生產 ParentComponent 中時，該欄位將被更新，然后螢屏將進行一些渲染，而我將失去該值。在將用戶回傳到下一個 UI 頁面之前，我必須添加代碼以將檔案名寫入 MySQL 后端。
感謝您的幫助和耐心。如此贊賞。搶

標籤：反应 功能 打回来 成分 钩

上一篇：Java傳遞帶有兩個引數的(lambda)函式

下一篇：不必要的區域變數-撰寫冗余變數更清晰的好習慣是什么？