如何在反应中使用 rsuite 从选择渲染器添加验证

如何解决如何在反应中使用 rsuite 从选择渲染器添加验证

  const [application,setApplication] = useState([])
  const [app,setApp] = useState([
    {
      id: null,code: null,name: null
    }
  ]);

useEffect(() => {
 let ignore = false;
   (async function load() {
    let response = await getAllData();
    if (!ignore) setApplication(response['data'])

 })()
 return () => ignore = true;
},[]);
     {
    
            label: (
              <div className="flex items-center">
                <label className="flex-1">Application</label>
                <div className="text-right">
                  <ButtonGroup>
                    <IconButton icon={<Icon icon="plus" />} onClick={() => appendApp()} />
                    <IconButton onClick={() => removeApp()} size="md" icon={<Icon icon="minus" />} style={{ display: app.length > 1 ? 'inline-block' : 'none' }} />
                  </ButtonGroup>
                </div>
              </div>
            ),name: 'applications',renderer: (data) => {
              const { control,register,errors } = useFormContext();
    
              return (
                <div className="flex flex-col w-full">
                  {
                    app.map((item,index) => (
                      <div key={index} className="flex flex-col pb-2 -items-center">
                        <div className="flex pb-2 w-full">
                          <SelectPicker
                            placeholder="Select Application"
                            data={application['data']}
                            labelKey="name"
                            valueKey="code"
                            style={{ width: '100%' }}
                            disabledItemValues={Array.isArray(control.getValues()['applications']) ? control.getValues()['applications'].map(x => x.id) : []}
                            onChange={(value) => control.setValue('applications',_setApp(value,index,'code'))}
                            value={control.getValues()['applications']?.code}
                          />
                        </div>
                      </div>
                    ))
                  }
                </div>
              )
            }

 const appendApp = () => {
    let i = 0;
    for (i = 0; i < noOfApp; i++) {
      setApp(arr => [...arr,{
        id: null,name: null,role: null
      }]);

      return app;
    }
  }

  const removeAppRole = () => {
    setApp([...app.slice(0,-1)]);
  }

  const _setApp = (value,idx,status) => {
    app[idx][status] = value;
    setApp(app);
    return app;
  }

如何在选择上添加验证？例如，当SELECT字段为空时，它应该验证需要选择。也例如当存在这样的现有数据时：

data = [{
 id: 1,name: 'IOS',code: 'ios'
}]

以及如何在选择字段上显示此数据？因为我有一个创建和编辑。 当我尝试编辑时，它不显示该值。

解决方法

我不使用寄存器，我更喜欢使用Controller，对于这些情况更实用，在react-hook-form的v7中，看这个例子：

我的选择组件：

import subprocess
with open('progress_temp.log','w') as fw:
    subprocess.run(["awk","{print FILENAME \" \" $0}","progress.log"],stdout=fw)

在其他组件中使用该组件：

import { ErrorMessage } from "@hookform/error-message";
import { IonItem,IonLabel,IonSelect,IonSelectOption } from "@ionic/react";
import { FunctionComponent } from "react";
import { Controller } from "react-hook-form";
import React from "react";

const Select: FunctionComponent<Props> = ({
  options,control,errors,defaultValue,name,label,rules
}) => {
  return (
    <>
      <IonItem className="mb-4">
        <IonLabel position="floating" color="primary">
          {label}
        </IonLabel>
        <Controller
          render={({ field: { onChange,onBlur,value } }) => (
            <IonSelect
              value={value}
              onIonChange={onChange}
              onIonBlur={onBlur}
              interface="action-sheet"
              className="mt-2"
            >
              {options ? options.map((opcion) => {
                return (
                  <IonSelectOption value={opcion.value} key={opcion.value}>
                    {opcion.label}
                  </IonSelectOption>
                );
              }):""}
            </IonSelect>
          )}
          control={control}
          name={name}
          defaultValue={defaultValue}
          rules={rules}
        />
      </IonItem>
      <ErrorMessage
        errors={errors}
        name={name}
        as={<div className="text-red-600 px-6" />}
      />
    </>
  );
};

export default Select;

在这种情况下，我使用 Ionic 作为 UI，但您可以使用 MaterialUI、ReactSuite 或其他框架，它们是相同的。

希望能帮到你，祝你好运。

编辑

存储库：Ionic React Select Form Hook 一个代码沙盒：Ionic React Select Form Hook