React-Select 破坏 CoreUi 功能答案

【问题标题】：React-Select breaking CoreUi functionalitiesReact-Select 破坏 CoreUi 功能
【发布时间】：2021-02-10 14:46:24
【问题描述】：

我将@coreui/react 与React-select 一起使用，问题是在scoped slots 中返回Select 元素会破坏core-ui 功能，例如搜索和排序

但是，如果在返回 <label> 或带有文本 Ex 的 <p> 时，它可以正常工作：<label>{item.status}</label>

问题

为什么 Select 组件会破坏功能？

非常感谢任何解决方法/努力

注意

我尝试过像<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

【问题讨论】：

您能否添加更多信息，例如错误消息、父组件或 JSfiddle 代码链接以更好地理解？
@kkchaitu 没有错误消息，简单地说，由于某些奇怪的原因，核心 UI 没有对 React Select 进行过滤或排序。
你试过用 plan Select 代替 React-select 吗？
@kkchaitu 是的，我尝试使用纯选择，它与纯选择完美配合，但是由于样式限制，我想使用 react-select
如果您可以将代码放在codesandbox.io 将有助于更好地理解

标签： javascript reactjs react-select core-ui

【解决方案1】：

我设法组装了一个codeandbox，并且能够找到它不起作用的原因并修复它。

问题：

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

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

解决方案：

基本上你应该在Select 中使用value 而不是defaultValue。

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

或

根据项目的某些独特属性（不是数组中的索引）添加一个键。

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

【讨论】：