Динамическая проверка формы ReactJS с пользовательским интерфейсом материала - PullRequest
Новая
       12

Динамическая проверка формы ReactJS с пользовательским интерфейсом материала

1 голос
/ 23 октября 2019

У меня проблемы с проверкой формы. Ниже приведена моя форма, которая минимально воспроизводима.

Я использовал React Material UI для формы. 

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { FormGroup } from '@material-ui/core';

function App(props) {
  const validator = {
    number: {
      rules: [
        {
          test: /([\d]+)/,
          message: 'numaric must contain only numeric characters',
        },
        {
          test: (value) => {
            return value.length > 5;
          },
          message: 'phone must be longer than five characters',
        },
      ],
      errors: [],
      valid: false,
      state: '',
    },
  };

  const [values, setValues] = React.useState({
    ssn: '',
    phone: '',
    email: '',
    country: '',
  });



  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

return (
  <React.Fragment>
  <div>
    <FormGroup autoComplete="on">
      <TextField
        id=""
        label="Phone"
        value={values.phone}
        onChange={handleChange('phone')}
        type="number"
        validators={validator}
        name='phone'
      />
    </FormGroup> 
  </div>
  </React.Fragment>

  );
}

export default App;

Я хочу, если пользователь введет значения меньше 5, они будутполучите сообщение об ошибке, и если они не введут числа, они получат другое сообщение об ошибке.

У меня возникла проблема с реализацией этой простой проверки

Мне нужна помощь, это будетбудьте очень довольны, если кто-нибудь может мне помочь в этом случае.

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

Может кто-нибудьпомогите мне, пожалуйста?

...