REACT - Когда пользователь изменяет опцию выпадающего списка, рендерит другой Form.Control? - PullRequest
Новая
       24

REACT - Когда пользователь изменяет опцию выпадающего списка, рендерит другой Form.Control?

0 голосов
/ 03 июля 2019

У меня есть модал вот так: 

  <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>
          );        
    }
  }

Но как я могу активировать его, когда пользователь меняет выбор в определенном месте модальной зоны?

Спасибо

...