如何解决React-Select 破坏了 CoreUi 功能
我将 @coreui/react
与 React-select
一起使用,问题是在 Select
中返回 scoped slots
元素会破坏 core-ui
功能,例如 searching & 排序
但是,如果返回带有文本 Ex 的 <label>
或 <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
解决方法
我设法组装了一个代码沙盒,并且能够找到它不起作用的原因并修复它。
问题:
https://codesandbox.io/s/twilight-butterfly-itppu?file=/src/App.js
我猜这个 Select 组件有一些用 defaultValue 初始化的内部状态。 然后排序时表会更改索引(它对数据数组进行排序)并且您使用索引作为 id,因此反应重用相同的元素但无法更新值,因为您仅提供 defaultValue。
解决方案:
基本上你应该在 value
中使用 defaultValue
而不是 Select
。
https://codesandbox.io/s/goofy-browser-b02xb?file=/src/App.js
或
根据项目的某些唯一属性(而不是数组中的索引)添加一个键。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。