1. import React, { useEffect } from 'react';
    2. import { Button } from 'antd';
    3. import FormRender, { useForm } from 'form-render';
    4. const schema = {
    5. displayType: 'row',
    6. type: 'object',
    7. properties: {
    8. input1: {
    9. title: '简单输入框简单输入框',
    10. description: 'sdfdsgfshfghfgdh',
    11. type: 'string',
    12. required: true,
    13. rules: [
    14. {
    15. required: true,
    16. message: 'ete',
    17. },
    18. ],
    19. },
    20. input2: {
    21. title: '简单输入框2',
    22. type: 'boolean',
    23. },
    24. input3: {
    25. title: '简单输入框3',
    26. type: 'string',
    27. required: true,
    28. },
    29. image: {
    30. title: '图片展示',
    31. type: 'string',
    32. format: 'image',
    33. },
    34. checkboxes: {
    35. title: '多选',
    36. description: '下拉多选',
    37. type: 'array',
    38. items: {
    39. type: 'string',
    40. },
    41. enum: ['A', 'B', 'C', 'D'],
    42. enumNames: ['杭州', '武汉', '湖州', '贵阳'],
    43. widget: 'checkboxes',
    44. default: null,
    45. },
    46. multiSelect: {
    47. title: '多选',
    48. description: '下拉多选',
    49. type: 'array',
    50. items: {
    51. type: 'string',
    52. },
    53. enum: ['A', 'B', 'C', 'D'],
    54. enumNames: ['杭州', '武汉', '湖州', '贵阳'],
    55. widget: 'multiSelect',
    56. default: null,
    57. },
    58. },
    59. };
    60. const Demo = () => {
    61. const form = useForm();
    62. useEffect(() => {
    63. form.setValues({ a: 1, b: 2, c: { x: { y: [{ z: 'sdf' }] } } });
    64. }, []);
    65. const onFinish = (formData, errorFields) => {
    66. if (errorFields.length > 0) {
    67. alert(
    68. 'errorFields:' +
    69. JSON.stringify(errorFields) +
    70. '\nformData:' +
    71. JSON.stringify(formData, null, 2)
    72. );
    73. } else {
    74. alert('formData:' + JSON.stringify(formData, null, 2));
    75. }
    76. };
    77. return (
    78. <div>
    79. <FormRender
    80. // debugCss
    81. validateMessages={{ required: '213' }}
    82. form={form}
    83. schema={schema}
    84. onFinish={onFinish}
    85. />
    86. <Button type="primary" onClick={form.submit}>
    87. 提交
    88. </Button>
    89. </div>
    90. );
    91. };
    92. export default Demo;

    label, descIcon 入参 随便传入什么值,都会透传,不会被 schema 截取 null 值在多选里的展示

    title 的布局需要重新写一下