ReactJS中如何将下拉框选中值拆分至多个输入框？

你的核心问题是把拼接后的完整地址字符串存在了状态里，导致无法拆分到对应输入框。要解决这个问题，需要存储原始的地址对象，而非拼接后的字符串，这样就能直接提取各字段赋值给对应输入框。

修改步骤及代码示例： #

1. 调整状态定义：将状态改为存储地址对象，初始值设为null
2. 修改下拉选项：显示拼接后的地址，但让选项关联对应的原始地址对象
3. 更新 onChange 逻辑：选中选项时，把对应的地址对象存入状态
4. 绑定输入框值：每个输入框分别绑定地址对象的对应属性

import { useState } from 'react';

// 定义地址类型（TypeScript 推荐，JS 可省略）
type Address = {
  Address_1: string;
  Address_2: string;
  Town: string;
  County: string;
};

const YourComponent = () => {
  // 状态改为存储地址对象，初始值为 null
  const [selectedAddress, setSelectedAddress] = useState<Address | null>(null);
  // 假设 getAddressData 是已获取的地址数据
  const getAddressData = { /* 你的地址数据集合 */ };

  return (
    <div>
      <select 
        onChange={(e) => {
          const selectedIndex = e.target.selectedIndex;
          // 跳过第一个默认选项
          if (selectedIndex > 0) {
            const address = getAddressData.address[selectedIndex - 1];
            setSelectedAddress(address);
          } else {
            setSelectedAddress(null);
          }
        }}
      >
        <option>Select Address</option>
        {getAddressData?.address?.map((address: Address, id) => (
          <option key={id}>
            {`${address.Address_1}, ${address.Address_2}, ${address.Town}, ${address.County}`}
          </option>
        ))}
      </select>

      {/* 四个输入框分别绑定对应字段 */}
      <input
        type="text"
        name="flatNumber"
        placeholder="Flat Number"
        value={selectedAddress?.Address_1 || ''}
        disabled={!selectedAddress}
      />
      <input
        type="text"
        name="street"
        placeholder="Street"
        value={selectedAddress?.Address_2 || ''}
        disabled={!selectedAddress}
      />
      <input
        type="text"
        name="town"
        placeholder="Town"
        value={selectedAddress?.Town || ''}
        disabled={!selectedAddress}
      />
      <input
        type="text"
        name="county"
        placeholder="County"
        value={selectedAddress?.County || ''}
        disabled={!selectedAddress}
      />
    </div>
  );
};

export default YourComponent;

补充说明： #

• 如果地址数据有唯一ID（如address.id），可以把option的value设为address.id，再通过ID查找对应地址对象，比用索引更可靠
• selectedAddress?.xxx || ''用于避免未选中地址时输入框显示undefined，保证值始终为字符串
• 给输入框加disabled属性，未选中地址时禁止编辑，优化用户体验

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