Проверка ввода для недопустимых полей в React Js - PullRequest
Новая
       12

Проверка ввода для недопустимых полей в React Js

0 голосов
/ 09 апреля 2020

В переменной data соответствующие значения сохранены, а данные вложены на один уровень.

На уровне 1 (родительском) у него есть заголовок, который отображается уже тогда, у него есть массив с именем sublevel, в котором есть несколько элементов.

Из элемента подуровня я занимаюсь созданием полей ввода для id, email, firstName, lastName, которые уже сделаны, и все в порядке на данный момент ..

Чтобы прояснить вопрос, я остановился на этом.

Теперь мне нужно выполнить проверку для каждого поля отдельно (по крайней мере, требуется проверка поля и регулярное выражение электронной почты)

Примечание: У меня нет доступа для добавления / удаления какого-либо значения внутри объекта data, потому что в реальном приложении это происходит из api, к которому у меня нет доступа.

Так что, пожалуйста, помогите мне, как справиться с валидацией в каждом отдельном поле. С помощью responsestrap я создаю форму, подобную 

const data = [
  {
     "Id":22383,
     "title":"Title 1",
     "quantity":5,
     "price":12,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"test12@gmail.com",
           "ccoId":"test12",
           "firstName":"test",
           "lastName":"user",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        }
     ]
  },
  {
     "Id":22383,
     "title":"Title 2",
     "quantity":1,
     "price":5,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"test23@gmail.com",
           "ccoId":"test23",
           "firstName":"hello",
           "lastName":"world",
           "partId":22383
        }
     ]
  }
   ]

const {Component, Fragment} = React;
const {Button, Collapse, Form, FormGroup, Input} = Reactstrap;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: []
    };
  }

  componentDidMount(){

  }
  
  render() {
    return <div> 
      {
        data.map((levelOne, i) => {
           return(
             <div key={i}>
               <h4> {levelOne.title} </h4>
                {
                  levelOne.sublevel.map((subLevel, j) => {
                   return(
                     <div key={j}> 
                      <Form inline>
                        <FormGroup>
                            <Input name="id" maxLength="50" defaultValue={subLevel.ccoId} placeholder="ccoId" />
                            <Input name="email" type="email" defaultValue={subLevel.email} placeholder="Email" />
                            <Input name="firstName" maxLength="50" defaultValue={subLevel.firstName} placeholder="firstName" />
                            <Input name="lastName" maxLength="50" defaultValue={subLevel.lastName} placeholder="lastName" />
                           
                        </FormGroup>
                        </Form>
                     </div>
                    )
                  })
                }
             </div>
           )
        })
    }
   <Button color="secondary" size="lg" disabled>Submit</Button>
    </div>;
  }

}


ReactDOM.render(<App />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>

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

Большое спасибо в заранее ..

...