У меня есть переменная (в реальном приложении это API) с именем 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>
Я застрял в нем очень долго, чтобы выполнить проверку для каждого отдельного элемента ввода и, следовательно, пожалуйста, помогите мне.
Большое спасибо в аванс ..
Ожидаемый результат:
