antd 里面下拉框联动

最新推荐文章于 2025-10-06 02:10:28 发布

原创最新推荐文章于 2025-10-06 02:10:28 发布 · 2.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #es6

react 同时被 2 个专栏收录

15 篇文章

订阅专栏

antd

7 篇文章

订阅专栏

本文介绍如何在前端开发中实现两个下拉框的联动效果，当第一个下拉框选值变化时，第二个下拉框的选项随之更新。通过使用Form.Item的shouldUpdate属性和onSelectChange事件，结合Ant Design的Select组件，实现实时同步并清空相关字段的值。

需求：两个下拉框，第一个下拉框切换后，第二个下拉框根据第一个的值改变下拉选项
使用shouldUpdate，另外当第一个值改变时，onSelectChange事件中，使用form.setFieldsValue将被关联的值清空（或者其他操作）

 const onSelectChange = (e, type) => {
    switch (type) {
      case 'classCode':
        return setClassCode(e), form.setFieldsValue({ typeCode: '' });
    }
  }
============分割=====================
<Form.Item label={'事件分类'} name="classCode" rules={[{ required: true, message: '请选择一个分组' }]}>
          <Select
            placeholder="请选择一个分组"
            value={classCode}
            allowClear
            onChange={(e) => onSelectChange(e, 'classCode')}
          >
            {Object.keys(classCodeList).map((item, index) => {
              return <Option value={item} key={index}>{classCodeList[item].name}</Option>
            })}
          </Select>
        </Form.Item>
         <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.classCode !== currentValues.classCode}
        >
          {({ getFieldValue }) => {
            return getFieldValue('classCode') ? (
              <Form.Item
                name="typeCode"
                label="详细类型"
                rules={[{ required: true, message: '请输入账户' }]}>
                <Select
                  placeholder="请选择一个详细类型"
                  allowClear
                >
                  {renderTypeCode(getFieldValue('classCode'))}
                </Select>
              </Form.Item>
            ) : null;
          }}
        </Form.Item>