reactjs - 変更された値は Dom に表示されません

Question

私はReactを学んでいます.私のテストアプリでは、「色の変更」ボタンをクリックするたびにシャッフルして色を変えるランダムな色の配列の2つの同一のセットを作成しています. ただし、色の値が正しく変更されていても、Dom に配列の色を更新させることができないようです。

import React from 'react';
class Card extends React.Component{
    constructor(props){
        super(props);
        const {r,g,b}=this.props.card
        this.state={
            style:{
                width:'100px',
                height:'100px',
                display:'inline-block',
                backgroundColor:`rgb(${r},${g},${b})`
            }
        }
    }
    onClick=()=>{
        const {r,g,b}=this.props.card
        console.log('color values of the card with index',this.props.id ,' is: ', r,g,b)
    }
    render(){
        const {style}=this.state
        return (
            <div style={style}>
                <button onClick={this.onClick}>card test</button>
            </div>
        )
    }
}
export default Card;

これは私の問題の写真です

写真でわかるように、クリックするたびに値が変わりますが、カードの色は変わりません。ただし、クラスベースのコンポーネントを非クラスベースのコンポーネントに変更し、コンストラクターではなくrender()でスタイルを設定すると機能しますが、クリックしたカードを親コンポーネントに渡すことができるようにクラスコンポーネントが必要です。