javascript - 通过Javascript逻辑在ant标签中启用多选选项

Question

我在我的项目中使用 Ant-design，所以我需要在我的表单中添加标签以供用户选择它，直到现在我添加的标签只允许选择一个选项并将其显示给用户，但现在我想移动多选功能。

以下是单选功能的代码。

父组件

import CheckableAntTag from "../../../../../../components/Tags";

export default function FormSection() {
  const mortgageData = [
    "Porque me foi recomendado",
    "Quero comparar com o seguro que tenho atualmente",
    "Para estar protegido(a) caso algo aconteça",
    "O meu seguro vai renovar-se em breve",
  ];

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      insuranceMotive: null,
    },

    onSubmit: (values) => {
      console.log(values);
    },
    validationSchema: validationSchemaSectionOne, //schema which validates the input with the help of Yup
  });

  return (
    <div className="firstSection">
      <form onSubmit={formik.handleSubmit}>
        <div className="selectable-tags-mortgage">
          {mortgageData.map((tag, index) => (
            <CheckableAntTag //Reusale component to select tags on click
              tag={tag}
              key={index}
              setValue={(val) => formik.setFieldValue("insuranceMotive", val)}
              value={formik.values.insuranceMotive}
            />
          ))}
        </div>
        {formik.errors.insuranceMotive && formik.touched.insuranceMotive && (
          <div className="formik-errors">{formik.errors.insuranceMotive}</div>
        )}
      </form>
    </div>
  );
}

标签组件

export default function CheckableAntTag({ tag, value, setValue }) {
  const { CheckableTag } = Tag

  return (
    <CheckableTag
      style={{
        backgroundColor: tag === value ? '#AACECD' : 'white'
      }}
      className="selectable-ant-tags"
      key={tag}
      checked={tag === value}
      onChange={() => setValue(tag)}>
      {tag}
    </CheckableTag>
  )
}

这工作正常并通过突出显示用户选择的标签，但我坚持在这里启用多选功能，以及 formik

希望有人帮助我，谢谢！

标签： javascriptreactjsformik