如何用单个useState维护多个antd Select组件的用户输入？

问题根源 #

Antd Select组件的onChange回调参数和原生input完全不同：原生input传递的是Event对象，而Select的onChange第一个参数是选中的value值，第二个是对应的选项对象，没有name或target属性，这就是你代码报错的原因。

核心疑问解答 #

1. 如何为Select组件命名并传递到onChange处理函数？

有两种简单可靠的方式：

• 箭头函数传参：在每个Select的onChange里用箭头函数包裹处理函数，手动传入对应的字段名
• 闭包生成专属处理函数：提前为每个字段创建绑定好字段名的处理函数

2. 如何从Antd官方文档找到正确的参数信息？

查看Select组件文档的API部分，重点看onChange属性的说明：

• 明确标注了onChange的参数为(value, option: Option | Option[]) => void，即第一个参数是选中值，第二个是选项对象
• 组件的name属性主要用于配合Antd Form组件做表单数据提交，不会自动传递到onChange回调中

修正后的代码示例 #

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

const App = () =>{
  const [varState, setVarState] = useState({firstName:'Jack', lastName:'Smith'});
  const firstNameOptions = [ 
    {label:'Jack', value:'Jack'}, 
    {label:'Jill',value:'Jill'}, 
    {label:'Bill',value:'Bill'} 
  ];
  const lastNameOptions = [ 
    {label:'Smith', value:'Smith'}, 
    {label:'Potter',value:'Potter'}, 
    {label:'Bach',value:'Bach'} 
  ];

  // 修改处理函数，接收选中值和对应字段名
  const changeState = (value, fieldName) => {
    setVarState(prevState => ({ 
      ...prevState, 
      [fieldName]: value 
    }));
    // 注意：setState是异步的，这里直接打印varState会拿到旧值
    // 要查看最新状态可以用useEffect监听varState变化
  };

  return (
    <>
      <div>
        {/* 用箭头函数传递字段名 */}
        <Select 
          placeholder="选择名字" 
          defaultValue={varState.firstName} 
          options={firstNameOptions} 
          onChange={(value) => changeState(value, 'firstName')}
        />
        <Select 
          placeholder="选择姓氏" 
          defaultValue={varState.lastName} 
          options={lastNameOptions} 
          onChange={(value) => changeState(value, 'lastName')}
        />
      </div>
    </>
  );
}

export default App;

关键改动说明 #

1. 调整changeState函数参数，直接接收选中值和字段名，避免依赖不存在的event属性
2. 每个Select的onChange用箭头函数包裹，手动传入对应的字段名，确保处理函数知道要更新哪个字段
3. 将原来的defaultValue="Pick One"换成placeholder提示文本，同时让defaultValue匹配state中的初始值（必须和选项的value一致）
4. 注意：setState是异步操作，直接在changeState中打印varState会获取到更新前的旧值，如需监听状态变化，可使用useEffect

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