У меня есть модал вот так:
<Modal.Body>
<Row>
<Col sm={6}>
<Form onSubmit={this.handleSubmit}>
{/* FullName */}
<Form.Group controlId='FullName'>
<Form.Label>First Name</Form.Label>
<Form.Control
type='text'
name='FullName'
required
placeholder='Full Name'
/>
</Form.Group>
{/* Person Type */}
<Form.Group controlId='PersonType'>
<Form.Label>Person Type</Form.Label>
<Form.Control
as='select'
defaultValue='Student'
onChange={this.handlePersonChange}
>
{people_list.map(ptype => (
<option key={ptype.PersonType}>
{ptype.PersonDescription}
</option>
))}
</Form.Control>
</Form.Group>
{/* Render here another Form.Control text when user changes "PersonType" options */}
<Form.Group>
<Button variant='primary' type='submit'>
Add Contact
</Button>
</Form.Group>
</Form>
</Col>
</Row>
</Modal.Body>
Как отобразить другой элемент управления, когда пользователь переключается между параметрами элемента управления «PersonType»?
Я хочу отобразить новый элемент управления, в котором написано замечание Render here another Form.Control text when user changes "PersonType" options
Я пытался сделать что-то вроде этого:
renderSpecificColumns(type) {
// eslint-disable-next-line default-case
switch(type){
case '1':
return (
<Form.Group controlId='Email'>
<Form.Label>Email</Form.Label>
<Form.Control type='Email' name='Email' required placeholder='Email' />
</Form.Group>
);
case '2':
return (
<Form.Group controlId='Phone'>
<Form.Label>Phone</Form.Label>
<Form.Control type='Phone' name='Phone' required placeholder='Phone' />
</Form.Group>
);
case '3':
return (
<Form.Group controlId='Nationality'>
<Form.Label>Nationality</Form.Label>
<Form.Control type='Nationality' name='Nationality' required placeholder='Nationality' />
</Form.Group>
);
}
}
Но как я могу активировать его, когда пользователь меняет выбор в определенном месте модальной зоны?
Спасибо