React选择破坏CoreUi功能

Question

我在React-select中使用React-select，问题是在scoped slots中返回Select元素会破坏core-ui功能，比如搜索&排序

但是，如果返回带有文本的<label>或<p> ( Ex：<label>{item.status}</label> )，则工作正常。

问题

为什么Select破坏了功能？

任何解决办法/努力都会受到高度赞赏。

Note

我尝试过像<p hidden >{item.status}</p>这样的解决方案，然后呈现Select组件，但是它不起作用。

import React from "react";
import Select from "react-select";
import { CDataTable } from "@coreui/react";

...

  <CDataTable
    bordered
    clickableRows
    fields={fields}
    hover
    items={[...employeeData]}
    itemsPerPage={10}
    itemsPerPageSelect
    loading={tableLoader}
    onRowClick={(e) => rowSelectHandler(e)}
    pagination
    size="sm"
    sorter={{ resetable: true }}
    striped
    tableFilter={{
      placeholder: "Filter",
      label: "Search:",
    }}
    scopedSlots={{
      status: (item, index) => (
        <td style={{ width: "13%" }}>
          <Select
            id={item.index}
            placeholder="Select Status"
            isSearchable={false}
            className="basic-single"
            onChange={(e) => selectChangeHandler(e.value, index)}
            classNamePrefix="select"
            defaultValue={{
              label: item.status,
              value: item.status,
              color: getBadge(item.status),
            }}
            // name="color"
            // inputValue={item.status}
            options={[
              {
                value: "ACTIVE",
                label: "ACTIVE",
                color: "#2eb85c",
              },
              {
                value: "DEACTIVE",
                label: "DEACTIVE",
                color: "#e55353",
              },
            ]}
            styles={colourStyles}
          />
        </td>
      ),
    }}
  />
...

编辑

如果antd-select与coreui-datatable一起工作，也可以接受它的答案

Answer 1

我成功地组装了一个代码框，也找到了它不能工作的原因，并修复了它。

问题是：

https://codesandbox.io/s/twilight-butterfly-itppu?file=/src/App.js

我猜这个Select有一些用defaultValue初始化的内部状态。然后，表在排序时更改索引(对数据数组进行排序)，并且将索引作为id使用，因此react重用相同的元素，但无法更新值，因为您只提供了defaultValue。

解决办法：

基本上，您应该在value中使用defaultValue而不是defaultValue。

https://codesandbox.io/s/goofy-browser-b02xb?file=/src/App.js

或

根据项的某些唯一属性(而不是数组中的索引)添加键。

https://codesandbox.io/s/zen-sky-56vly?file=/src/App.js