Find.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import { useState } from "react";
  2. import { Input, Space, Select } from "antd";
  3. const { Search } = Input;
  4. const FindWidget = () => {
  5. const [isLoading, setIsLoading] = useState(false);
  6. const onSearch = (value: string) => {
  7. setIsLoading(true);
  8. console.log(value);
  9. };
  10. const onReplace = (value: string) => {
  11. console.log(value);
  12. };
  13. return (
  14. <div>
  15. <Space orientation="vertical">
  16. <Search
  17. placeholder="input search text"
  18. allowClear
  19. onSearch={onSearch}
  20. style={{ width: "100%" }}
  21. loading={isLoading}
  22. />
  23. <Search
  24. placeholder="input search text"
  25. allowClear
  26. enterButton="替换"
  27. style={{ width: "100%" }}
  28. onSearch={onReplace}
  29. />
  30. <Select
  31. defaultValue="current"
  32. style={{ width: "100%" }}
  33. onChange={(value: string) => {
  34. console.log(`selected ${value}`);
  35. }}
  36. options={[
  37. {
  38. value: "current",
  39. label: "当前文档",
  40. },
  41. {
  42. value: "all",
  43. label: "全部译文",
  44. },
  45. ]}
  46. />
  47. <div>搜索结果</div>
  48. </Space>
  49. </div>
  50. );
  51. };
  52. export default FindWidget;