前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色
场景描述:
一个酒店房间里面可以有很多产品的床单。
点击进入一个房间的详情页,可以设置选择哪一个产品,其中Select 的下拉框选项应该是从后端获取的该房间下的产品。但我们编辑该酒店房间信息的时候,我们可以修改该房间选中的产品。
但是在这样一种场景:该房间下可选择的产品已经将以前选中的产品删除了,因此Select无法正常回显,而且此时点击保存房间的详情信息也应该将这个选中的产品删除掉。
因此需求如下:点击编辑进来,判断以前选中的产品,目前是否还有继续在生产,如果没有,则将该产品标记为红色,并且不允许保存提交表单。
一、通过tagRender
属性将标签渲染为其他颜色。
Antd 的Select 组件提供了 tagRender
属性来自定义标签的渲染方式。
以下是一个示例,展示了如何使用 tagRender
属性将不存在于选项中的 ID 标记为红色:
import { Form, Select } from 'antd';
import './MyForm.css'; // 导入自定义样式文件const MyForm = () => {const productOptions = []; // 假设这是你的 productOptions 数组const handleProductChange = (value) => {// 处理产品变化的逻辑};const tagRender = (props) => {const { label, value, closable, onClose } = props;const isValueExist = productOptions.some((option) => option.value === value);return (<span className={isValueExist ? '' : 'red-tag'}>{label}{closable && (<span className="ant-select-selection-item-remove" onClick={onClose} />)}</span>);};return (<Form><Form.Itemname="prodIdentifierList"label=""style={{ marginBottom: 12 }}noStylerules={[{required: true,message: '产品不可以为空',},]}><Selectmode="multiple"placeholder="请选择产品"options={productOptions}tagRender={tagRender}onChange={handleProductChange}/></Form.Item></Form>);
};export default MyForm;
在上述示例中,我们定义了一个名为 tagRender
的函数作为 Select
组件的 tagRender
属性的值。在 tagRender
函数中,我们检查选项的值是否存在于 productOptions
中,并根据结果应用不同的类名来标记标签的颜色。如果值存在,则不添加任何类名;如果值不存在,则添加 'red-tag'
类名来标记标签的颜色为红色。
然后,在你的自定义样式文件 MyForm.css
中,你可以定义 .red-tag
类名的样式,将标签的文本颜色设置为红色:
.red-tag {color: red;
}
这样,当回显的 ID 不存在于选项中时,Select
组件中的标签文本将显示为红色。
二、对表单提交时进行校验。
更进一步,如果在 Select
组件中回显的 ID 在选项中不存在,你可以通过自定义校验规则来对表单项进行校验,并显示相应的错误信息。以下是一个示例:
t { Form, Select } from 'antd';const MyForm = () => {const productOptions = []; // 假设这是你的 productOptions 数组const handleProductChange = (value) => {// 处理产品变化的逻辑};const validateProduct = (_, value) => {const invalidProducts = value.filter((id) =>productOptions.every((option) => option.value !== id));if (invalidProducts.length > 0) {return Promise.reject('产品已经删除,不允许提交');}return Promise.resolve();};return (<Form><Form.Itemname="prodIdentifierList"label=""style={{ marginBottom: 12 }}noStylerules={[{required: true,message: '产品不可以为空',},{validator: validateProduct,},]}><Selectmode="multiple"placeholder="请选择产品"options={productOptions}onChange={handleProductChange}/></Form.Item></Form>);
};export default MyForm;
在上述示例中,我们定义了一个名为 validateProduct
的函数作为校验规则的验证器。在验证器函数中,我们首先筛选出在选项中不存在的产品 ID,并将其存储在 invalidProducts
数组中。如果 invalidProducts
数组不为空,表示存在已删除的产品,我们通过返回一个被拒绝的 Promise 来触发验证失败,并提供错误信息 '产品已经删除,不允许提交'
。
然后,在 Form.Item
组件的 rules
属性中,我们添加了一个新的规则对象,其中 validator
属性指向我们定义的 validateProduct
验证器函数。
这样,当回显的 ID 在选项中不存在时,表单项将触发校验失败,并显示指定的错误信息。
请注意,由于校验器是异步的,因此需要返回一个 Promise 对象。在校验通过时,应返回一个被解析的 Promise (Promise.resolve()
),而在校验失败时,应返回一个被拒绝的 Promise 并提供错误信息 (Promise.reject('产品已经删除,不允许提交')
)。