Reactjs Прокрутите до первой ошибки при отправке формы большой формы.

Question

Я использую реагирование с пользовательским интерфейсом материалов и машинописью и имею форму. При отправке формы, если на входах есть ошибка проверки, я бы хотел перейти к первому входу с ошибкой проверки. Ниже я вставил простой код формы, который вводит ошибку проверки в городские данные при отправке. В действительности ошибка может быть в любом или нескольких входах.

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;

Любая идея, как перейти к первому входу с ошибкой проверки.

Answer 1

Я думаю, что вы можете сохранить ссылку ввода, где вы получаете ошибку, и вы можете перейти к этой ссылке, вы можете сослаться это Я думаю,