动态滚动到react-hook中的元素

问题描述

对于我的基于React hook的组件（我正在使用Ant设计框架），我有大量的表单输入。我的要求是，每当用户尝试提交表单而不遵守表单的验证规则时，在出现这种错误情况时，焦点将滚动到第一个输入元素。这是我的表格，

 <Form onSubmit={handleSubmit}>
     <div>
         <Form.Item validateStatus={error['market-outlet'] ? 'error' : ''}
                            help={error['market-outlet'] ? error['market-outlet'] : ''}>
             <Select
                     onChange={handleSelectChange}
                     id="market-outlet"
             >
                 <Option>option 1</Option>
                 <Option>option 2</Option>
                 <Option>option 3</Option>
            </Select>
            <Form.Item validateStatus={error['manufacturer-name'] ? 'error' : ''}
                            help={error['manufacturer-name'] ? error['manufacturer-name'] : ''}>
                            <Input
                                onChange={handleDefaultChange}
                                id="manufacturer-name"
                                value={formData.manufacturer}
                            />
            </Form.Item>
            <Form.Item
                            validateStatus={error['manufacturer-contact'] ? 'error' : ''}
                            help={
                                error['manufacturer-contact'] ? error['manufacturer-contact'] : ''
                            }
                        >
                            <Tooltip title={displayIndustryContact}>
                                <Input
                                    //ref={errorInput}
                                    id="manufacturer-contact"
                                    onChange={handleContactChange}
                                    value={displayIndustryContact}
                                />
                            </Tooltip>
                        </Form.Item>
     </div>
 </Form>

为简单起见，我仅在整个表单中添加了三个字段，您可以看到每个字段都具有此验证。现在我的问题是，当用户填写该字段并向上滚动到该字段时，如何识别该字段？这是我检查表单是否有错误的函数，

const isDataValid = () => {
    const errors = validate();
    setLoading(true);

    let valid = true;

    if (Object.values(errors).length) {
        setError(errors);
        setLoading(false);
        simpleLoadingNotification(AlertTypeEnum.ERROR,'Error !',JSON.stringify(errors,null,' '));
        valid = false;
        
        //scrolling upto the first element
        const firstProp = Object.keys(errors)[0];
        setFirstErrorElement(firstProp);
        
    }

    return valid;
};

我想从上面的函数中识别出第一个错误元素，并把这个元素作为焦点。因此，我将根据元素ID设置状态，例如

setFirstErrorElement(firstProp);

然后我做了一个useEffect调用，例如

React.useEffect(() => {

    let elem = document.getElementById(firstErrorElement);
    //elem.scroll(0,0);
    if(firstErrorElement != ''){
        elem.scrollTo(0,0); 
    }
    
},[firstErrorElement]);

但是控件不会滚动到该特定元素。我知道，我可以使用useRef。但是，如何通过我的isDataValid函数为这些元素动态设置引用呢？我的表单组件还包含嵌套组件。 useRef是否足以捕获嵌套组件的错误情况。

任何解决此问题的想法都将受到赞赏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）