Reactjs 将动态元素中的输入数据传输到Reaction

我已经完成了代码，在那里我可以动态创建一个带有图像的组件并保存状态.

状态在此数组中捕获:

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

一般来说，代码按其应有的方式工作，但也是如此.在SimpleComponent组件内，有一个输入，我想在其中指定数据并保存此状态:

<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={() => {}} />
      </>   
    )
}