React动态组件中数字输入框的状态保存实现咨询

目前你的UploadLogos数组只存储了图片相关状态，要给每个组件的数字输入框也保存状态，需要把数组的每个元素改成对象结构，同时更新对应的状态处理逻辑，具体实现如下：

1. 修改App组件的状态结构与处理函数 #

• 将原有的单值数组改为包含image和numberValue的对象数组，初始化时每个对象默认图片为0、数字值为0
• 更新添加组件的逻辑，新增元素时采用标准对象结构
• 修改图片更新函数dynamicLogos，现在要更新对象里的image字段
• 新增处理数字输入的函数setNumberValue，用来更新对应组件的数字值

修改后的App.js代码：

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

function App() {
  // 改成对象数组，每个元素包含图片和数字输入值
  const [UploadLogos, setUploadLogos] = useState([{ image: 0, numberValue: 0 }]);

  const dynamicLogos = (id, url) => {
    setUploadLogos((el) => {
      const ArrayLogos = [...el];
      // 更新对应id的image字段
      ArrayLogos[id] = { ...ArrayLogos[id], image: url };
      return ArrayLogos;
    });
  };

  // 新增数字输入的状态更新函数
  const setNumberValue = (id, value) => {
    setUploadLogos((el) => {
      const ArrayLogos = [...el];
      // 更新对应id的numberValue字段，转成数字类型
      ArrayLogos[id] = { ...ArrayLogos[id], numberValue: Number(value) };
      return ArrayLogos;
    });
  };

  return (
    <div className="App">
      <button
        onClick={() =>
          setUploadLogos([...UploadLogos, { image: 0, numberValue: 0 }])
        }
      >
        Add
      </button>
      {UploadLogos.map((item, i) => (
        <SimpleComponent
          key={i}
          id={i}
          image={item.image}
          numberValue={item.numberValue}
          setImage={dynamicLogos}
          setNumberValue={setNumberValue}
        />
      ))}
    </div>
  );
}

export default App;

2. 修改SimpleComponent组件的输入框绑定 #

把数字输入框的value绑定到传入的numberValue，onChange事件调用setNumberValue更新状态，同时确保输入值转为数字类型：

修改后的SimpleComponent.jsx代码：

export function SimpleComponent({ id, image, setImage, numberValue, setNumberValue }) {
  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} alt="Uploaded logo" /> 
      <input 
        type="number" 
        value={numberValue} 
        onChange={(e) => setNumberValue(id, e.target.value)} 
      />
    </>   
  )
}

修改完成后，每个动态创建的SimpleComponent里的数字输入框值都会和UploadLogos数组的状态同步，添加新组件时会自动初始化数字值为0，同时完全保留原有图片上传功能。

内容的提问来源于stack exchange，提问作者s.kuznetsov