单击按钮如何在两个屏幕之间切换

Question

我正在为候诊室建立一个网络应用程序。在大多数情况下，无论如何，都会有类似“地球电视”的视频显示。如果医生的协助正在呼叫病人去看医生，它应该出现在屏幕上并使视频消失片刻。我知道这必须通过ButtonClick-Event完成，但我不知道如何。

      return (
      <div className="maincontent">
    <div className="topbar">
    <button className="testbutton" onClick={() => this.test()}>
        TEST
      </button>
      <div className="topbarlabel">
        <label className="label15">{this.state.praxisname}</label>
      </div>
    </div>

    <div className="maindiv">
      <video className="videoplayer"  src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"controls autostart autoPlay muted
        controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
        poster="http://sourceposter.jpg">
      </video>
      {/* Patientenaufruf */}
      {Object.keys(patient).length > 0 && (
        <div className="patientenaufruf blink">
          <label className="label30 item">
            {patient.titel} {patient.vorname} {patient.nachname}
          </label>
          <label className="label30 item">bitte in</label>
          <label className="label30 item">{patient.raum}</label>
        </div>
      )}