Form.tsx 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { useRef } from "react";
  2. import { ProForm, ProFormSelect } from "@ant-design/pro-components";
  3. import type { ProFormInstance } from "@ant-design/pro-components";
  4. import { Button } from "antd";
  5. interface IFormData {
  6. sv: number;
  7. }
  8. const Widget = () => {
  9. const formRef = useRef<ProFormInstance | undefined>(undefined);
  10. const svCur = 5;
  11. const onWhat = () => {
  12. const it = formRef.current?.getFieldValue("sv") || [];
  13. console.log(it);
  14. if (!it.includes(svCur)) {
  15. it.push(svCur);
  16. }
  17. formRef.current?.setFieldsValue({ sv: it });
  18. };
  19. const onReset = () => {
  20. formRef.current?.resetFields();
  21. };
  22. return (
  23. <ProForm<IFormData>
  24. name="demo"
  25. formRef={formRef}
  26. submitter={{
  27. render: (_props, doms) => {
  28. return [
  29. ...doms,
  30. <Button.Group key="refs" style={{ display: "block" }}>
  31. <Button htmlType="button" onClick={onWhat} key="what">
  32. What?
  33. </Button>
  34. <Button htmlType="button" onClick={onReset} key="reset">
  35. Reset
  36. </Button>
  37. </Button.Group>,
  38. ];
  39. },
  40. }}
  41. >
  42. <ProFormSelect
  43. width="md"
  44. name="sv"
  45. mode="multiple"
  46. allowClear
  47. dependencies={["sv"]}
  48. options={Array.from(Array(10).keys()).map((x) => {
  49. return { value: x, label: `V${x}`, disabled: x === svCur };
  50. })}
  51. />
  52. </ProForm>
  53. );
  54. };
  55. export default Widget;