具有搜索功能的 antd 选择选项 [英] antd select option with search functionality

问题描述

我不知道这是否可行，但是当用户从选择选项中单击时，它将转到该特定网址，我的观点是我们是否可以在搜索..."中具有搜索功能，以便用户可以从数百个选项，然后选择它并单击按钮，该按钮也应转到相同的onChange"地址.您还可以建议其他选项，即使没有选择但功能必须相同，这是我的代码:

import "antd/dist/antd.css";import { Select } from "antd";//import { Link, useHistory, useRouteMatch, useParams } from "react-router-dom";函数事件部分(){//const history = useHistory();const { 选项 } = 选择；//const changeHandler = (id) =>{//history.push(`/customer/${id}`);//};返回 (<div>{/* 当在搜索中找到时，我希望这个按钮也带到onChange"地址*/}<button>在搜索中找到时点击我</button><选择样式={{ 宽度:200 }}占位符=搜索..."模式=多个"打开={真}列表高度={128}//onChange={changeHandler}><Option value="1">未识别</Option><Option value="2">关闭</Option><Option value="3">通信</Option><Option value="4">已识别</Option><Option value="5">已解决</Option><Option value="6">取消</Option>

);}导出默认 EventsSection;

解决方案

第一部分完成.查看 CodeSanbox.

第二部分我还不清楚.

正是这一部分

<块引用>

然后可以点击那个按钮，这应该把用户带到那个'onChange'

i dont know if this is possible but at the moment when user click from select options it will take to that specific url, my point is can we have search functionality in 'Search...' so user could search from hundreds of option and then choose it and click the button and that button should also take to that same 'onChange' address. You can also suggest other options, even without select but functionality must be same , here is my code:

import "antd/dist/antd.css";
import { Select } from "antd";
// import { Link, useHistory, useRouteMatch, useParams } from "react-router-dom";

function EventsSection() {
  // const history = useHistory();
  const { Option } = Select;

  // const changeHandler = (id) => {
  //   history.push(`/customer/${id}`);
  // };
  return (
    <div>
      {/* when found in search i want this button take to  'onChange' address also*/}
      <button>click me when found in search</button>
      <Select
        style={{ width: 200 }}
        placeholder="Search..."
        mode="multiple"
        open={true}
        listHeight={128}
        // onChange={changeHandler}
      >
        <Option value="1">Not Identified</Option>
        <Option value="2">Closed</Option>
        <Option value="3">Communicated</Option>
        <Option value="4">Identified</Option>
        <Option value="5">Resolved</Option>
        <Option value="6">Cancelled</Option>
      </Select>
    </div>
  );
}

export default EventsSection;

解决方案

The first part is done. Check at CodeSanbox.

The second part is still unclear to me.

Exactly this part

and then that button can be cliked which should take user to that ’onChange’

这篇关于具有搜索功能的 antd 选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！