javascript - 使用 React Context（图像编辑器应用程序）将状态从 Child 传递到 App 组件

问题描述

我正在构建这个简单的图像编辑器，您可以在其中从驱动器上传图像，然后使用各种 css 属性对其进行过滤。文件上传部分在一个名为 FileUpload 的组件中，是 App 的子组件。我的问题是我需要 FileUpload 的状态才能在 App.js 中访问以呈现图片。这是 App 组件的返回：

return (
    <div className="container">
      <div className="file-upload">
        <FileUpload />
      </div>

      <div style={getImageStyle()} className="main-image" />
      <div className="sidebar">
        {options.map((option, index) => {
          return (
            <SidebarItem
              key={index}
              name={option.name}
              active={index === selectedOptionIndex}
              handleClick={() => setSelectedOptionIndex(index)}
            />
          );
        })}
      </div>
      <Slider
        min={selectedOption.range.min}
        max={selectedOption.range.max}
        value={selectedOption.value}
        handleChange={handleSliderChange}
      />
    </div>
  );

现在我需要一个位于 FileUpload 组件内的状态：

 const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState("");
  const [uploadPercentage, setUploadPercentage] = useState(0);

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await axios.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress: (progressEvent) => {
          setUploadPercentage(
            parseInt(
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );

          // Clear percentage
          setTimeout(() => setUploadPercentage(0), 10000);
        },
      });

      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });

      setMessage("File Uploaded");
    } catch (err) {
      if (err.response.status === 500) {
        setMessage("There was a problem with the server");
      } else {
        setMessage(err.response.data.msg);
      }
    }
  };

  return (
    <Fragment>
      <form onSubmit={onSubmit}>
        <div>
          <input
            type="file"
            className="custom-file-input"
            id="customFile"
            onChange={onChange}
          />
          <label className="custom-file-label" htmlFor="customFile">
            {filename}
          </label>
        </div>

        <Progress percentage={uploadPercentage} />

        <input
          type="submit"
          value="Upload"
          className="btn btn-primary btn-block mt-4"
        />
      </form>
      {uploadedFile ? (
        <div className="row mt-5">
          <div className="col-md-6 m-auto">
            <h3 className="text-center">{uploadedFile.fileName}</h3>
            <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
          </div>
        </div>
      ) : null}
    </Fragment>
  );
};

现在我需要uploadFile 状态才能在应用程序中访问，因为我需要该文件来设置div 的背景图像 <div style={getImageStyle()} className="main-image" /> 可以使用useContext，还是我应该在父应用程序内移动所有状态和逻辑？非常感谢你的帮助

标签： javascriptreactjs

javascript - 使用 React Context（图像编辑器应用程序）将状态从 Child 传递到 App 组件

问题描述

解决方案

推荐阅读