gpt4 book ai didi

Reactjs滚动到大型表单表单提交的第一个错误

转载 作者:行者123 更新时间:2023-12-05 02:55:26 26 4
gpt4 key购买 nike

我正在使用与 Material UI 和 typescript 的 react ,并有一个表单。在提交表单时,如果输入有验证错误,我想滚动到第一个有验证错误的输入。我在下面粘贴了简单的表单代码,在提交时在城镇输入中注入(inject)验证错误。实际上,错误可能出现在任何或多个输入中。

import React, { useState, FormEvent } from 'react';
import { Grid, TextField, Button } from '@material-ui/core';

const ScrollTest = () => {
const [state, setState] = useState<{ town: string; county: string }>({
town: '',
county: '',
});

const [error, setError] = useState({ town: '', county: '' });

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
const errorVal = !value ? `${name} is requied` : '';
setState({ ...state, [name]: value });
setError({ ...error, [name]: errorVal });
};

const handleSubmit = (e: FormEvent) => {
e.preventDefault();
if (!state.town) {
setError({ ...error, town: 'Town input is required' });
}
};

return (
<>
<form onSubmit={(e) => handleSubmit(e)} noValidate>
<Grid container justify='center' alignItems='center' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
error={!!error.town}
variant='outlined'
fullWidth
id='town'
label='Town'
name='town'
autoComplete='town'
placeholder='Town *'
value={state.town || ''}
onChange={handleChange}
helperText={error.town}
/>
</Grid>
</Grid>
<Grid container justify='center' alignItems='center' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
error={!!error.county}
variant='outlined'
fullWidth
id='county'
label='County'
name='county'
autoComplete='county'
placeholder='County'
value={state.county || ''}
onChange={handleChange}
helperText={error.county}
/>
</Grid>
</Grid>
<Grid container justify='center' alignItems='center' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
variant='outlined'
fullWidth
id='county2'
label='County2'
name='county2'
autoComplete='county2'
placeholder='County2'
value={state.county || ''}
onChange={handleChange}
/>
</Grid>
</Grid>
<br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br>{' '}
<br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br>{' '}
<br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br>{' '}
<br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br>{' '}
<br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br> <br></br>{' '}
<br></br> <br></br> <br></br>
<Grid container justify='center' alignItems='center'>
<Grid item xs={12} md={6}>
<Button type='submit' fullWidth variant='contained' color='primary'>
Update profile
</Button>
</Grid>
</Grid>
</form>
</>
);
};

export default ScrollTest;

知道如何滚动到出现验证错误的第一个输入。

最佳答案

                             <Button
disabled={isSubmitting}
variant="contained"
color="primary"
onClick={() => {
const err = Object.keys(errors);
if (err.length) {
const input = document.querySelector(
`input[name=${err[0]}]`
);

input.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'start',
});
}
submitForm();
}}
>
{isSubmitting ? (
<CircularProgress size={22} />
) : (
'Submit'
)}
</Button>

这是使用 Formik 滚动到大表单中的第一个错误最简单的方法,我在 Formik 提交按钮中执行此操作,其中 errors 对象和 submitForm() 函数来自 Formik

关于Reactjs滚动到大型表单表单提交的第一个错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61232786/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com