主页 / 问题 / 1562527
Accepted
rabbit
Asked:2024-01-21 13:35:39 +0000 UTC2024-01-21 13:35:39 +0000 UTC

在反应中点击渲染动态元素时动态 useRef 和保存状态

  • 772

我有一个功能，可以在单击按钮时添加带有文件输入的元素，并且对于每个添加的输入，我将数据填充到挂钩数组中。此外，我还使用useRef将本机输入与文件上传按钮相关联。

但我不知道如何为创建的每个输入使用文件上传。我还想保存下载文件的状态。

我想做的只是使用文件输入创建动态元素，放置图像并将该状态存储在数组中。

也许我可以在这里使用动态挂钩？

<input type="file" 
       accept="image/*" 
       style={{display: "none"}} 
       ref={logoRef} 
       onChange={event => { /* тут возможно динамический хук для сохранения состояния */(URL.createObjectURL(event.target.files[0])) }} 
/>

请告诉我该怎么做？请帮我！

这是代码：

应用程序.js

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

function App() {

  const [UploadLogo, setUploadLogo] = useState([]);
  
  return (
    <div className="App">       
       <SimpleComponent UploadLogo={UploadLogo} setUploadLogo={setUploadLogo} /> 
    </div>
  );
}



export default App;

SimpleComponent.jsx

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

export function SimpleComponent({UploadLogo, setUploadLogo}) {
    const logoRef = useRef();
    return(

    <button onClick={() => setUploadLogo([...UploadLogo, `Logo${UploadLogo.length}`])}>
     Add
    </button>

    {UploadLogo.map((logo, i) => (
       <div key={i}>
            <input type="file" accept="image/*" style={{display: "none"}} ref={logoRef} 
             onChange={event => { /* тут возможно динамический хук для сохранения состояния */(URL.createObjectURL(event.target.files[0])) }} 
            />
            <button onClick={() => imageRef.current?.click()}>
             Upload Logo
            </button>
            <img src="{ ??? }">
        </div>
     ))}

)}
reactjs

1 个回答

  1. Best Answer
    1. 首先，单击时您有一个 logoRef 而不是 imageRef。
    2. 其次，wrap SimpleComponent需要返回一个根元素，将其包装在Fragment或空引号中

    建议为输入类型=“文件”创建一个具有自己的 logoRef 的组件，并在 onChange 期间通过更改元素的 url 来更改 UploadLogo 的状态

    function App() {
  const [UploadLogo, setUploadLogo] = useState([]);

  const changeUrlLogo = (idx, url) => {
    setUploadLogo((prev) => {
      let newArr = [...prev];
      newArr[idx] = url;
      return newArr;
    });
  };

  return (
    <div className="App">
      <button
        onClick={() =>
          setUploadLogo([...UploadLogo, `Logo${UploadLogo.length}`])
        }
      >
        Add
      </button>
      {UploadLogo.map((logo, i) => (
        <SimpleComponent
          key={i}
          logo={logo}
          idx={i}
          changeUrlLogo={changeUrlLogo}
        />
      ))}
    </div>
  );
}

function SimpleComponent({ logo, changeUrlLogo, idx }) {
  const imageRef = useRef();
  return (
    <>
      <div>
        <input
          type="file"
          accept="image/*"
          style={{ display: "none" }}
          ref={imageRef}
          onChange={(event) => {
            changeUrlLogo(idx, URL.createObjectURL(event.target.files[0]));
          }}
        />
        <button onClick={() => imageRef.current?.click()}>Upload Logo</button>
        <img src={logo} />
      </div>
    </>
  );
}
    • 1

相关问题