1

对于我的基于 React 钩子的组件（我正在使用 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 是否足以捕获嵌套组件的错误场景。

非常感谢任何解决此问题的想法。

4

0 回答 0