是的，多个复选框的验证

Question

我需要创建以下带有多个复选框的字段。我需要以下验证：

1. 至少应选择其中一项
2. 如果是其他字段，用户需要将文本添加到输入字段

我需要编写一个验证来实现这一点。

Answer 1

1. 至少应选择其中之一：
   这就是您使用 yup 验证规则执行该逻辑的方式

const validationSchema = yup.object().shape({
  assets: yup.array().min(1).of(yup.string().required()).required(),
});

2. 如果其他字段用户需要将文本添加到输入字段：
   您也可以使用 Formik 执行此逻辑，但我建议您为“资产”创建一个本地状态，如果您想使用文本字段创建新资产，只需按下该按钮即可资产本地字段中的新资产，然后它将自动在屏幕上呈现该新资产。
   然后您可以选中或取消选中该新资产。我希望你明白了。
   
   这是您可以检查的代码片段！

   import { useState } from "react";
    import * as yup from "yup";
    import { FieldArray, Formik } from "formik";
    
    const initialValues = {
      assets: [],
    };
    
    const validationSchema = yup.object().shape({
      assets: yup.array().min(1).of(yup.string().required()).required(),
    });
    
    function Form() {
      const [newAsset, setNewAsset] = useState("");
      const [assets, setAssets] = useState([
        "Property",
        "Motor Vehicles",
        "Financial Assets",
      ]);
    
      const handleAddNewAsset = () => {
        if (newAsset) {
          setAssets([...assets, newAsset]);
          setNewAsset("");
        }
      };
    
      return (
        <>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values) => {
              console.log("form values if validation succeed: ", values);
            }}
          >
            {(props) => (
              <form onSubmit={props.handleSubmit}>
                <FieldArray
                  name="assets"
                  render={(arrayHelpers) => (
                    <>
                      {assets.map((asset, idx) => (
                        <label className="form-check-label my-1">
                          <input
                            name={`assets.${idx}`}
                            type="checkbox"
                            className="form-check-input"
                            value={asset}
                            checked={props.values.assets.includes(asset)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                arrayHelpers.push(asset);
                              } else {
                                const index = props.values.assets.indexOf(asset);
                                arrayHelpers.remove(index);
                              }
                            }}
                          />
                          <span className="mx-2">{asset}</span>
                        </label>
                      ))}
                    </>
                  )}
                />
                <input
                  type="text"
                  value={newAsset}
                  onChange={(e) => setNewAsset(e.target.value)}
                />
                <button type="button" onClick={handleAddNewAsset}>
                  Others (specify)
                </button>
              </form>
            )}
          </Formik>
        </>
      );
    }

我希望它会有所帮助。谢谢！