динамический useRef и сохранение состояния при рендеринге динамического элемента по клику в react

Question

У меня есть функциональность, которая добавляет элементы с файловым вводом по нажатию кнопки, и с каждым добавленным вводом я заполняю данные в массив hook. Кроме того, я использую useRef, чтобы связать нативный ввод с кнопкой загрузки файла.

Но я не могу понять, как я могу использовать загрузку файла для каждого созданного ввода. И я также хочу сохранить состояние загруженного файла.

Все, что я хочу сделать, это просто создать динамические элементы с вводом файла, разместить изображение и сохранить это состояние в массиве.

Может быть, я могу использовать здесь динамические хуки?

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

Подскажите, пожалуйста, как я могу это сделать? Пожалуйста, помогите мне!

Вот код:

App.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>
     ))}

)}

Answer 1

Во первых у тебя там logoRef а не imageRef при клике.
Во вторых оборачивай SimpleComponent обязан вернуть один корневой элемент, оборачивай в Фрагмент или в пустые ковычки

Желательно создать компонент для input type="file" со своим logoRef и при onChange менять состояние UploadLogo изеняя url элемента

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

БЛОГ НА HUSL

динамический useRef и сохранение состояния при рендеринге динамического элемента по клику в react

Ответы (1 шт):