前端案例-Select组件在编辑回显时如何将选不到的id回显为其他颜色

前端案例-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.Item
        name="prodIdentifierList"
        label=""
        style={{ marginBottom: 12 }}
        noStyle
        rules={[
          {
            required: true,
            message: '产品不可以为空',
          },
        ]}
      >
        <Select
          mode="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.Item
        name="prodIdentifierList"
        label=""
        style={{ marginBottom: 12 }}
        noStyle
        rules={[
          {
            required: true,
            message: '产品不可以为空',
          },
          {
            validator: validateProduct,
          },
        ]}
      >
        <Select
          mode="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('产品已经删除，不允许提交'))。