react-color を使用してフロントエンドのカラーピッカーを実装する方法

'react' から React、{ Component、Fragment、createRef } をインポートします。
'antd' から { Popover } をインポートします。
'react-color' から SketchPicker をインポートします。

タイプ StateType = {
  サブタイトルカラー: 文字列;
};
タイプPropType = {
  [propName: 文字列]: 任意;
};
インターフェースHandleCreateVideoByHotNews {
  状態: 状態タイプ;
  プロパティ: プロパティタイプ;
}

クラスHandleCreateVideoByHotNewsはComponentを拡張します{
  コンストラクタ(props: any) {
    スーパー(小道具);
    この状態 = {
      サブタイトルカラー: '#FFF',
    }
  }

  // 字幕のフォント色を変更する private setSubtitleFontColor = (e: any): void => {
    コンソールログ(e);
    this.setState({
      サブタイトルカラー: e.hex,
    });
  }

  与える（） {
    const { サブタイトルカラー } = this.state;

    戻る （
      <ポップオーバー
        content={<SketchPicker color={subtitleColor}
        onChange={(e) => {this.setSubtitleFontColor(e)}}
        onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}
        トリガー="クリック"
      >
        <div className="create-hotnews-video-popup-operate-item-titleset-item-operate フォントカラーセット">
          <div className="font-color-set-value">{サブタイトルの色}</div>
          <div className="font-color-set-show" style={{backgroundColor: subtitleColor}}></div>
        </div>
      </ポップオーバー>
    ）
  }
}

デフォルトのHandleCreateVideoByHotNewsをエクスポートします。