So verwenden Sie React-Color zum Implementieren des Front-End-Farbwählers

importiere React, {Komponente, Fragment, createRef} von „react“;
importiere { Popover } von 'antd';
importiere { SketchPicker} von „react-color“;

Typ StateType = {
  Untertitelfarbe: Zeichenfolge;
};
Typ PropType = {
  [propName: Zeichenfolge]: beliebig;
};
Schnittstelle HandleCreateVideoByHotNews {
  Status: Statustyp;
  Requisiten: Requisitentyp;
}

Klasse HandleCreateVideoByHotNews erweitert Komponente {
  Konstruktor(Requisiten: beliebig) {
    super(Requisiten);
    dieser.Zustand = {
      Untertitelfarbe: '#FFF',
    }
  }

  // Ändere die Schriftfarbe des Untertitels private setSubtitleFontColor = (e: any): void => {
    konsole.log(e);
    dies.setState({
      Untertitelfarbe: e.hex,
    });
  }

  rendern() {
    const { Untertitelfarbe } = dieser.Zustand;

    zurückkehren (
      <Einblendmenü
        Inhalt={<SketchPicker-Farbe={Untertitelfarbe}
        beiÄnderung={(e) => {this.setSubtitleFontColor(e)}}
        onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}
        Auslöser="Klick"
      >
        <div Klassenname = "Erstellen von Hotnews-Video-Popup-Bedienen von Elementtitelsatz-Element-Bedienen von Schriftfarbensatz">
          <div className="font-color-set-value">{Untertitelfarbe}</div>
          <div Klassenname = "Schriftfarbe festlegen" Stil = {{Hintergrundfarbe: Untertitelfarbe}}></div>
        </div>
      </Popover>
    )
  }
}

Standard-HandleCreateVideoByHotNews exportieren;