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

最新推荐文章于 2024-06-03 11:05:05 发布

one.dream

最新推荐文章于 2024-06-03 11:05:05 发布

阅读量9.7k

点赞数

文章标签：前端 javascript 数据库 react reactjs

本文链接：https://blog.csdn.net/qq_44472722/article/details/131790174

版权

<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>