如何在反应钩子中选择项目时修复选择 onchange 显示

时间:2021-04-29 16:32:43

标签: reactjs react-hooks react-hook-form rsuite

  const [appRole, setAppRole] = useState([]);

     {
            label: 'Application - Role',
            type: 'select',
            name: 'applications',
            renderer: (data) => {
              const { control } = useFormContext();
    
              useEffect(() => {
                setAppRole(array =>
                  Array.isArray(control.defaultValuesRef.current['applications']) ? [
                    ...control.defaultValuesRef.current['applications']
                  ] : [
                    {
                      id: null,
                      code: null,
                      role: null
                    }
                  ])
              }, []);
              console.log(control.setValue)
    
              return (
                <div className="flex flex-col w-full">
                  {
                    appRole.map((item, index) => (
                      <div key={index} className="flex flex-col pb-2 -items-center">
                        <SelectPicker
                          placeholder="Select Application"
                          data={application['data']}
                          labelKey="name"
                          valueKey="code"
                          style={{ width: '100%' }}
                          onChange={(value) => control.setValue('applications', _setAppRole(value, index, 'code'))}
                          value={item.code}
                        />
                        <SelectPicker
                          placeholder="Select Role"
                          data={roles}
                          labelKey="role"
                          valueKey="role"
                          style={{ width: '100%' }}
                          onChange={(value) => control.setValue('roles', _setAppRole(value, index, 'role'))}
                          value={item.role}
                        />
                      </div>
                    ))
                  }
                </div>
              )
            }
          }


  const _setAppRole = (value, idx, status) => {
    appRole[idx][status] = value;
    setAppRole(appRole);
    return appRole;
  }

如何修复 onchange 值显示?因为当我尝试选择它将应用的角色时,我尝试选择它不起作用的应用程序或显示所选应用程序。

enter image description here

例如,我已经选择了一个应用程序,但它没有显示。

我该如何解决?

0 个答案:

没有答案