rjsf 表单滚动回顶部，并且在自定义小部件内按按钮时取消输入字段的焦点

Question

我需要一个自定义小部件，因为根据不同属性的值

linkType

我想渲染不同的输入类型（选择，文本区域）

我尝试在本地存储表单中的状态，以便我可以将其作为道具传递到我的小部件中，但是，当我这样做时，表单会在输入内的每个按键上滚动回顶部，并且还会使输入失去焦点（可能会重新设置） -渲染整个表单）即使只有链接操作值发生了变化。

表单组件：

export const PageEditModalForm: FC<PageEditModalFormProps> = ({ onUpdate, onError, onCancel }) => {
const { currentFormData, currentSchema } = usePageContext();
const [formData, setFormData] = useState(currentFormData);

const customWidgets = useMemo(() => ({
    LinkTypeWidget
}), []);

const uiSchema: UiSchema = useMemo(() => ({
    'ui:submitButtonOptions': {
        norender: true
    },
    "ui:title": "",
    "links": {
        "items": {
            "linkAction": {
                "ui:widget": "LinkTypeWidget",
            },
            // "linkType": {
            //     "ui:widget": "LinkTypeOptionsWidget",
            // }
        }
    },
    "html": {
        "ui:widget": "textarea"
    },
}), []);

return (
    <ModalBox className="bb-edit-page-modal">
        {currentSchema &&
            <>
                {/*title is disabled in schema so can style it here */}
                <h2>{currentSchema.title}</h2>
                <Form
                    id={currentSchema.title}
                    schema={{ ...currentSchema }}
                    onChange={(e) => setFormData(e.formData)}
                    formData={{ ...formData }}
                    validator={validatorAjv8}
                    onError={onError}
                    widgets={customWidgets}
                    onSubmit={onUpdate}
                    uiSchema={uiSchema}
                >
                    <Grid container spacing={1} className="bb-flex bb-fixed">
                        <Grid item>
                            <Button onClick={onCancel} variant="text">
                                Cancel
                            </Button>
                        </Grid>
                        <Grid item className="bb-ml-auto">
                            <Button variant="contained" type="submit">
                                Update
                            </Button>
                        </Grid>
                    </Grid>
                </Form>
            </>
        }
    </ModalBox>
);

};

自定义小部件：

import React, { useCallback } from 'react';

从'@mui/material'导入{TextField}；

const LinkTypeWidget = (props: 任意) => { console.log("道具", 道具); console.log("formContext", props.registry.formContext);

const handleChange = useCallback((event: any) => {
    const newValue = event.target.value;
    props.onChange(newValue);
}, [props]);

return (
    <TextField
        id={props.id}
        label="Outlined"
        variant="outlined"
        value={props.value}
        onChange={handleChange}
    />
);

};

导出{LinkTypeWidget};

Answer 1

事实证明

{currentSchema &&

导致重新渲染问题，删除此解决了我所有的问题