ReactJS+Ant Design Pro中实现Select选中选项后在ProDescriptions展示详情

嘿，我来帮你搞定这个需求！要实现选中Select选项后在ProDescriptions里展示对应详情，核心思路就是维护一个选中项的状态，把选中的完整对象数据传给ProDescriptions就行。下面是具体的实现步骤和修改后的代码：

步骤1：添加状态存储选中的展品详情 #

在你的组件内部（假设是函数组件），用useState来保存选中的完整展品对象：

import { useState } from 'react';

// 组件内部声明状态
const [selectedExhibit, setSelectedExhibit] = useState(null);

步骤2：修改Select的onSelect事件，获取完整选中项 #

原来的onSelect只传递了选项的value，现在我们需要从props.listObj里找到对应的完整对象，同时保留你原来的props.getvalue(value)逻辑：

<Select
  placeholder="Chọn hiện vật muốn thêm"
  style={{ width: 120 }}
  onSelect={(value) => {
    // 保留原有的props方法调用
    props.getvalue(value);
    // 从列表中找到选中的完整对象
    const targetItem = props.listObj.find(obj => obj.id === value);
    // 更新状态，存储完整对象
    setSelectedExhibit(targetItem);
  }}
>
  {/* 给Option加上key属性，符合React列表渲染规范 */}
  {props.listObj.map((obj: any) => (
    <Option key={obj.id} value={obj.id}>{obj.name}</Option>
  ))}
</Select>

步骤3：配置ProDescriptions展示详情 #

根据你需要展示的字段，配置ProDescriptions的columns和data属性，把selectedExhibit传进去。还可以加个条件判断，在未选中时提示用户：

{selectedExhibit ? (
  <ProDescriptions
    data={selectedExhibit}
    columns={[
      { title: 'ID hiện vật', dataIndex: 'id', key: 'id' },
      { title: 'Tên hiện vật', dataIndex: 'name', key: 'name' },
      // 按需添加更多字段，比如描述、创建时间等
      { title: 'Mô tả', dataIndex: 'description', key: 'description' },
    ]}
    column={2} // 分成两列展示，优化布局
    bordered
    style={{ marginTop: 16 }}
  />
) : (
  <div style={{ marginTop: 16, color: '#666' }}>Vui lòng chọn hiện vật để xem chi tiết</div>
)}

完整修改后的代码示例 #

把所有改动整合到你的表单里：

import { useState } from 'react';
import { Form, Input, Select, Option } from 'antd';
import { ProDescriptions } from '@ant-design/pro-components';

const YourFormComponent = (props) => {
  const [selectedExhibit, setSelectedExhibit] = useState(null);
  // 假设currentRow是你组件中已有的变量
  const { currentRow } = props;

  return (
    <Form onFinish={(value) => props.onInsertObjectFinish(value)}>
      <Form.Item name="TopicId" label="ID chủ đề ">
        <Input id="TopicId" type="hidden" value={currentRow?.id} />
        {currentRow?.id}
      </Form.Item>
      <Form.Item name='ExhibitId' label="Tên hiện vật ">
        <Select
          placeholder="Chọn hiện vật muốn thêm"
          style={{ width: 120 }}
          onSelect={(value) => {
            props.getvalue(value);
            const targetItem = props.listObj.find(obj => obj.id === value);
            setSelectedExhibit(targetItem);
          }}
        >
          {props.listObj.map((obj: any) => (
            <Option key={obj.id} value={obj.id}>{obj.name}</Option>
          ))}
        </Select>

        {/* 展示选中项详情 */}
        {selectedExhibit ? (
          <ProDescriptions
            data={selectedExhibit}
            columns={[
              { title: 'ID hiện vật', dataIndex: 'id', key: 'id' },
              { title: 'Tên hiện vật', dataIndex: 'name', key: 'name' },
              { title: 'Mô tả', dataIndex: 'description', key: 'description' },
              // 可根据实际需求添加更多字段
            ]}
            column={2}
            bordered
            style={{ marginTop: 16 }}
          />
        ) : (
          <div style={{ marginTop: 16, color: '#666' }}>Vui lòng chọn hiện vật để xem chi tiết</div>
        )}
      </Form.Item>
    </Form>
  );
};

export default YourFormComponent;

额外提示 #

• 如果props.listObj是异步加载的，不用担心初始为空的情况：空数组调用find会返回undefined，setSelectedExhibit会设为null，不会影响渲染。
• 如果字段名需要转换或者格式化（比如时间字段），可以用render函数处理：

  {
    title: 'Ngày tạo',
    dataIndex: 'createTime',
    key: 'createTime',
    render: (text) => text ? moment(text).format('DD/MM/YYYY') : 'Không có dữ liệu'
  }
  

这样就能实现你想要的效果啦——每次选中Select里的选项，下方就会实时展示该选项的详细信息~

内容的提问来源于stack exchange，提问作者Nguyễn Hữu Trường