>

저는 반응 js를 처음 사용합니다. 여기에 reactStrap 의 모달을 사용하고 있습니다 .

<Modal isOpen={props.isOpen} centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center marginForOrOption">
              <span>or</span>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

이제 모달을 닫기 위해 해당 버튼을 추가했습니다. 그러나 Instrapstrap은 기본적으로 제공되지만 내 경우에는 오지 않습니다.

또 다른 문제는 ModalHeader에서는 기본적으로 h5가 제공되므로 어떻게 변경할 수 있습니까?


  • 답변 # 1

    첫 번째 질문 : toggle 를 제공해야합니다  reactstrap이 자체 닫기 버튼을 표시하도록 ModalHeader가 다음과 같이 표시되도록하려면ModalHeader구성 요소의 소품에 대한 메소드입니다.

    <ModalHeader toggle={this.toggleModalMethod}>
       Change this Question?
    </ModalHeader>
    
    

    두 번째 질문 : 모달 헤더 내부에서 h5로 많은 작업을 수행하지는 않지만 h5 요소 스타일을 변경하여 원하는 모양으로 만들 수 있습니다.

    <ModalHeader>
      <span className="customStyleToOverrideDefault">Change this Question?</span>
    </ModalHeader>
    
    

    도움이된다면 내 답변에 투표하는 것을 잊지 마십시오.

관련 자료

  • 이전 ios - 갤러리의 비디오 URL을 NSData (H264)로 변환해야 함 (Swift)
  • 다음 c# - ValueType [] 확장 메서드를 사용할 수없는 이유