我使用的是react with Material UI和typescript，并有一个表单。在提交表单时，如果输入有验证错误，我想滚动到有验证错误的第一个输入。我已经粘贴了下面的简单表单代码，在提交时将验证错误插入到城镇输入中。事实上，错误可能出现在任何或多个输入中。
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
我认为你可以在出现错误的地方保存输入的引用，然后滚动到该引用，你可以引用这个，我认为
另一种简单的方法是使用React Hook Form
并在初始化useForm挂钩时使用shouldFocusError选项
例如：
const { register, handleSubmit } = useForm({ shouldFocusError: true })