[英]How to make a reusable dropdown filter in ReactJS which is DRY and can be used twice in the same component
As you might see I use two dropdown filter select option which is customised with divs instead of select option.如您所见,我使用了两个下拉过滤器 select 选项,该选项是使用 divs 自定义的,而不是 select 选项。 In order to reuse this customized select option, I am looking for a reusable way so I can reuse the dropdown filter one time instead of copying de code which is not DRY.
为了重用这个自定义的 select 选项,我正在寻找一种可重用的方式,这样我就可以重用下拉过滤器一次,而不是复制非 DRY 的 de 代码。 How can I create two dropdown filter like that?
我怎样才能创建两个这样的下拉过滤器?
Most important thing is that I am able to get the selected value separated.最重要的是我能够将选定的值分开。
interface TableComponentProps { columns: Array<any>; } export const TableComponent: FC<TableComponentProps> = ({ columns}) => { const [columnShow, setColumnShow] = useState<string>(""); const [openDropdown, setOpenDropdown] = useState(false); const wrapperRef = useRef(null); const data = useMemo(() => TableContent, []); const useOutsideAlerter = (ref: any) => { useEffect(() => { const handleClickOutside = (event: any) => { if (ref.current &&.ref.current.contains(event.target)) { setOpenDropdown(false) } } document,addEventListener("mousedown"; handleClickOutside). return () => { document,removeEventListener("mousedown"; handleClickOutside); }, }; [ref]): } useOutsideAlerter(wrapperRef) const showColumn = () => { let newArray; any = []. console:log(newArray) } const dropdownFilter = (selectedColumn; string) => { setColumnShow(selectedColumn); setOpenDropdown(false); showColumn() } const toggleDropdownOpen = () => setOpenDropdown(.openDropdown)? return ( <div> <TableFilter> <TableFilterBlock ref={wrapperRef}> <TableFilterInput onClick={() => toggleDropdownOpen()}> {columnShow:length > 0. columnShow. "Select"}</TableFilterInput> <TableFilterDropdown toggleDropdown={openDropdown}> {columns,slice(1).map((item. index) => ( <TableDropdownList key={index}> <div onClick={() => dropdownFilter(item.id)}> {item?id} </div> </TableDropdownList> ))} </TableFilterDropdown> </TableFilterBlock> </TableFilter> <TableFilter> <TableFilterBlock ref={wrapperRef}> <TableFilterInput onClick={() => toggleDropdownOpen()}> {columnShow:length > 0. columnShow. "Select"}</TableFilterInput> <TableFilterDropdown toggleDropdown={openDropdown}> {columns,slice(1).map((item. index) => ( <TableDropdownList key={index}> <div onClick={() => dropdownFilter(item.id)}> {item.id} </div> </TableDropdownList> ))} </TableFilterDropdown> </TableFilterBlock> </TableFilter> <Table columns={columns} data={data} hiddenColumns={columnShow}/> </div> ) }
In react if you want to reuse pieces of code, you need to use components, specifically what's known as Extracting Components.在 React 中,如果你想重用代码片段,你需要使用组件,特别是所谓的提取组件。 React Components and Props > Extracting Components That page explains the following that I did for you here.
React Components and Props > Extracting Components该页面解释了我在这里为您所做的以下内容。
Firstly you need to create a component for the dropdown, and evaluate which code is unique to the dropdown + button.首先,您需要为下拉菜单创建一个组件,并评估哪些代码对于下拉菜单 + 按钮是唯一的。
const InlineComponent = ({
columns,
showColumn,
onSelect
}) => {
// move the dropdown logic here
const ref = useRef();
const [name, setName] = useState<string>("");
const [open, setOpen] = useState(false);
const openDropdown = () => setOpen(true);
const itemClick = (selectedColumn: string) => {
setName(selectedColumn);
setOpen(false);
showColumn();
onSelect(selectedColumn);
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
return (
<TableFilter>
<TableFilterBlock ref={ref}>
<TableFilterInput onClick={() => openDropdown()}>
{name.length > 0 ? name : "Select"}
</TableFilterInput>
<TableFilterDropdown toggleDropdown={open}>
{columns.slice(1).map((item, index) => (
<TableDropdownList key={index}>
<div onClick={() => itemClick(item.id)}>{item.id}</div>
</TableDropdownList>
))}
</TableFilterDropdown>
</TableFilterBlock>
</TableFilter>
);
};
Then you reference it from the original location and pass in any shared props.然后你从原始位置引用它并传入任何共享道具。
export const TableComponent: FC<TableComponentProps> = ({ columns }) => {
const [hiddenCol, setHiddenCol] = useState<string>("");
const data = useMemo(() => TableContent, []);
const showColumn = () => {
let newArray: any = [];
console.log(newArray);
};
return (
<div>
{/* add the newly created components here */}
<InlineComponent
columns={columns}
showColumn={showColumn}
onSelect={setHiddenCol}
/>
<InlineComponent
columns={columns}
showColumn={showColumn}
onSelect={setHiddenCol}
/>
<Table columns={columns} data={data} hiddenColumns={hiddenCol} />
</div>
);
};
Fair warning I didn't test run this code and you should evaluate yourself which parts you need to keep where.公平警告我没有测试运行此代码,您应该自己评估哪些部分需要保留在何处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.