передать input данные в динамическом элементе в react

Question

У меня есть код, в котором я могу динамически создавать компонент с изображениями и сохранять его состояние.

Состояние сохраняется в этом массиве:

const [UploadLogos, setUploadLogos] = useState([0]);
const dynamicLogos = (id, url) => {
    setUploadLogos((el) => {
      let ArrayLogos = [...el]; 
      ArrayLogos[id] = url; 
      return ArrayLogos 
    })
};

Код работает, как надо, но также, внутри компонента SimpleComponent есть input, в котором я хочу указать данные и сохранить это состояние:

<input type="number" value={{}} onChange={() => {}} />

Пожалуйста, подскажите, как это сделать? Спасибо!

Вот весь код:

App.js

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

function App() {

  const [UploadLogos, setUploadLogos] = useState([0]);
  const dynamicLogos = (id, url) => {
        setUploadLogos((el) => {
          let ArrayLogos = [...el]; 
          ArrayLogos[id] = url; 
          return ArrayLogos 
        })
  };
  
  return (
    <div className="App">
      <button
        onClick={() =>
          setUploadLogos([...UploadLogos, UploadLogos.length])
        }
      >
        Add
      </button>
      {UploadLogos.map((logo, i) => (
        <SimpleComponent
          key={i}
          id={i}
          Image={logo}
          setImage={dynamicLogos}
        />
      ))}
    </div>
  );
}

export default App;

SimpleComponent.jsx

export function SimpleComponent({id, Image, setImage}) {
    return (
      <>
        <input 
            type="file" accept="image/*"
            onChange={event => { if (!event.target.files[0]) return; setImage(id, URL.createObjectURL(event.target.files[0])) }} 
        />
        <img src={Image} /> 
        <input type="number" value={{}} onChange={() => {}} />
      </>   
    )
}

Answer 1

Переделывать сильно не стал, поэтому стиль кода ваш.

И так. Нам понадобится превратить состояние из массива примитивов в массив объектов. Допустим

const [UploadLogos, setUploadLogos] = useState([{ url: '', inp: 0 }]);

Меняем функцию изменения состояния, добавляем данные инпута

const dynamicLogos = (id, url, inp) => {
    setUploadLogos((el) => {
      let ArrayLogos = [...el]; 
      if (url !== null) ArrayLogos[id] = { ...ArrayLogos[id], url: url };
      if (inp !== null) ArrayLogos[id] = { ...ArrayLogos[id], inp: inp };
      return ArrayLogos; 
    })
};

Меняем рендер, передаем изображение и сам инпут(теперь logo это объект с ключами url и inp

{UploadLogos.map((logo, i) => (
    <SimpleComponent
      key={i}
      id={i}
      Image={logo.url}
      inp={logo.inp}
      setImage={dynamicLogos}
    />
))}

Меняем компонент SimpleComponent

export function SimpleComponent({id, Image, setImage, inp}) {
    return (
      <>
        <input 
            type="file" accept="image/*"
            onChange={event => { if (!event.target.files[0]) return; setImage(id, URL.createObjectURL(event.target.files[0]), null) }} 
        />
        <img src={Image} /> 
        <input type="number" value={inp} onChange={(e) => setImage(id, null, +e.target.value)} />
        <br />
      </>   
    )
}

Полный код:

export function SimpleComponent({id, Image, setImage, inp}) {
    return (
      <>
        <input 
            type="file" accept="image/*"
            onChange={event => { if (!event.target.files[0]) return; setImage(id, URL.createObjectURL(event.target.files[0]), null) }} 
        />
        <img src={Image} /> 
        <input type="number" value={inp} onChange={(e) => setImage(id, null, +e.target.value)} />
        <br />
      </>   
    )
}

function App() {

  const [UploadLogos, setUploadLogos] = useState([{ img: '', inp: 0 }]);
  const dynamicLogos = (id, url, inp) => {
        setUploadLogos((el) => {
          let ArrayLogos = [...el]; 
          if (url !== null) ArrayLogos[id] = { ...ArrayLogos[id], url: url };
          if (inp !== null) ArrayLogos[id] = { ...ArrayLogos[id], inp: inp };
          return ArrayLogos; 
        })
  };
  
  return (
    <div className="App">
      <button
        onClick={() =>
          setUploadLogos([...UploadLogos, { url: '', inp: 0 }])
        }
      >
        Add
      </button>
      <br />
      {UploadLogos.map((logo, i) => (
        <SimpleComponent
          key={i}
          id={i}
          Image={logo.url}
          inp={logo.inp}
          setImage={dynamicLogos}
        />
      ))}
    </div>
  );
}

Рабочий код в песочнице

БЛОГ НА HUSL

передать input данные в динамическом элементе в react

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