如何在React中自动填充所选Warehouse的ID至指定输入字段？

我完全懂你的需求——通过下拉选择仓库名称后，自动把对应仓库的ID填充到禁用的输入框里，同时提交表单时能把这个ID正确传给后端。咱们来一步步搞定这个问题，先看看你代码里的几个关键问题，再给出修改方案：

1. 初始状态类型错误 #

你一开始把store的初始值设成了数组[]，但表单的各个字段是键值对结构，应该用对象来初始化，不然解构赋值const { name, area, lat, long, wh } = store会出问题。

2. Select的Option未绑定ID值 #

你的下拉选项只显示了仓库名称，但没把仓库ID设为option的value，导致选中时拿到的是名称而不是ID，这就没法自动填充ID了。

3. 输入框未绑定正确的状态字段 #

你原来的输入框绑定的是循环里的ware._id，这不是当前选中的仓库ID，应该绑定到store状态里的warehouse字段。

修改后的完整代码示例 #

import { useState } from 'react';
import axios from 'axios';

const StoreForm = ({ warehouses }) => {
  // 初始状态改成对象，包含所有表单字段
  const [store, setStore] = useState({
    name: "",
    area: "",
    lat: "",
    long: "",
    wh: "", // 存选中的仓库名称
    warehouse: "" // 存选中的仓库ID
  });

  const { name, area, lat, long, wh, warehouse } = store;

  // 处理普通输入字段的变化
  const onChange = e => {
    setStore(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  // 单独处理仓库选择的变化
  const handleWarehouseChange = (e) => {
    const selectedWarehouseId = e.target.value;
    // 根据ID找到对应的仓库对象
    const selectedWarehouse = warehouses.find(ware => ware._id === selectedWarehouseId);
    
    setStore(prev => ({
      ...prev,
      wh: selectedWarehouse?.name || "", // 更新仓库名称
      warehouse: selectedWarehouseId // 更新仓库ID
    }));
  };

  const onSubmit = e => {
    e.preventDefault();
    const config = {
      headers: { "Content-Type": "application/json" }
    };
    // 提交时store里已经包含正确的warehouse ID了
    axios.post("/api/store", store, config)
      .then(res => console.log("Store created successfully"))
      .catch(err => console.error(err));
    // 重置表单
    setStore({
      name: "",
      area: "",
      lat: "",
      long: "",
      wh: "",
      warehouse: ""
    });
  };

  return (
    <form onSubmit={onSubmit}>
      {/* 其他输入字段示例，用onChange处理 */}
      <div className="form-group">
        <input
          type="text"
          name="name"
          value={name}
          onChange={onChange}
          placeholder="Store Name"
          required
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          name="area"
          value={area}
          onChange={onChange}
          placeholder="Area"
          required
        />
      </div>
      {/* 仓库选择下拉框 */}
      <select 
        className="custom-select" 
        name="wh" 
        onChange={handleWarehouseChange}
        value={wh}
      >
        <option value="">请选择仓库</option> {/* 加个默认选项更友好 */}
        {warehouses.map(ware => (
          <option key={ware._id} value={ware._id}>{ware.name}</option>
        ))}
      </select>
      {/* 自动填充ID的输入框 */}
      <div className="form-group">
        <input 
          type="text" 
          disabled 
          name="warehouse" 
          value={warehouse}
          placeholder="仓库ID"
          required 
        />
      </div>
      <button type="submit">保存仓库</button>
    </form>
  );
};

export default StoreForm;

关键修改说明 #

• 把store的初始状态改成对象，符合表单字段的键值对结构。
• 给每个option加上value={ware._id}，这样选中时能获取到对应的仓库ID。
• 新增handleWarehouseChange函数，通过选中的ID找到仓库对象，同时更新仓库名称和ID到状态中。
• 输入框的value绑定到store.warehouse，这样就能自动显示选中的仓库ID了。

这样修改后，你选择任意仓库，输入框就会自动填充对应的ID，提交表单时store对象里的warehouse字段就是正确的ID，和你在Postman里手动输入的效果一样，而且不用用户手动输入，完全符合需求~

内容的提问来源于stack exchange，提问作者kamran javed