反应-当用户更改下拉列表选项时，呈现另一个Form.Control吗？

Question

我的模态是这样的：

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

但是，当用户在模态的特定位置更改选择时，如何调用它呢？

谢谢