React项目中如何根据选中选项自动填充Antd Input组件的值

实现方案 #

1. 前置准备 #

提前维护公司名称与对应IBAN的映射关系，可根据你的业务数据来源调整为静态配置或接口返回后动态生成：

// 示例映射表，可自行扩展
const nameIbanMapping = {
  "FRANCILIENNE CONSEIL": "FR76 3000 1007 9412 3456 7890 185",
  // 其他公司对应的IBAN配置
}

2. 核心逻辑实现 #

采用受控组件模式绑定Antd Input，在名称选中回调中查询对应IBAN并更新Input绑定的状态即可，完整示例代码如下：

import { useState } from 'react';
import { Select, Input } from 'antd';

const nameIbanMapping = {
  "FRANCILIENNE CONSEIL": "FR76 3000 1007 9412 3456 7890 185",
  "SAMPLE COMPANY": "DE89 3704 0044 0532 0130 00"
};

const IbanAutoFill = () => {
  const [selectedCompany, setSelectedCompany] = useState('');
  const [ibanValue, setIbanValue] = useState('');

  const handleCompanyChange = (val) => {
    setSelectedCompany(val);
    // 查询对应IBAN，无匹配值则清空输入框
    const matchedIban = nameIbanMapping[val] || '';
    setIbanValue(matchedIban);
  };

  return (
    <div style={{ width: 400, padding: 24 }}>
      <Select
        placeholder="选择公司名称"
        value={selectedCompany}
        onChange={handleCompanyChange}
        style={{ marginBottom: 16, width: '100%' }}
        options={Object.keys(nameIbanMapping).map(name => ({
          label: name,
          value: name
        }))}
      />
      <Input
        placeholder="IBAN值"
        value={ibanValue}
        onChange={(e) => setIbanValue(e.target.value)}
      />
    </div>
  );
};

export default IbanAutoFill;

3. 常见问题排查 #

• 确保Input使用受控模式，必须绑定value属性到状态变量，仅设置defaultValue无法触发视图更新
• 映射表的key值需要和Select组件返回的value完全一致，注意大小写、首尾空格的匹配
• 如果公司数据从接口获取，拿到返回数据后先处理成映射表结构存储，避免每次选中时遍历全量数组查询

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