Antd动态表单(一个表单项的显示依赖于另一个值)

148 阅读1分钟
<Form.Item name="Type" label="类型" rules={[{ required: true }]}>
  <Select options={options}>
  </Select>
</Form.Item>
<Form.Item
    noStyle
    shouldUpdate={(prevValues, curValues) => prevValues.Type !== curValues.Type }>
    {({ getFieldValue }) => {
        let fieldType = getFieldValue('Type');
        if (fieldType == 1) {
            return (
                <Form.Item name="Value" label="内容" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
            )
        } else if (fieldType == 2) {
            return (
                <Form.Item name="Value" label="图片" rules={[{ required: true }]}>
                    <PicturesWall max="1">
                    </PicturesWall>
                </Form.Item>
            )
        } else if (fieldType == 3) {
            return (
                <Form.Item name="Value" label="内容" rules={[{ required: true }]}>
                    <ReactQuill
                        ref={quill}
                        theme="snow"
                        value={content}
                        onChange={setContent}
                        modules={modules}
                    />
                </Form.Item>
            )
        }
    }}
</Form.Item>