我是React的新手，我正在尝试创建一个页面，点击颜色方块将显示该颜色的十六进制代码。我尝试了很多不同的方法，但我不知道我的问题是在事件处理中，还是在状态处理中，或者是在其他方面。我可以将十六进制代码设置为存在或不存在，但单击时不能更改。
以下是我的主要内容：

<main>
  <h1>Dynamic Hex Code Display</h1>
  <div id="container"></div>
  <script type="text/babel">
    class ColorSquare extends React.Component {
      render() {
        var blockStyle = {
          height: 150,
          backgroundColor: this.props.color,
        };
        return <div style={blockStyle} onClick = {this.props.onClick}></div>;
      }
    }
    class HexDisplay extends React.Component {
      render() {
        var hexText = {
          fontFamily: "arial",
          fontWeight: "bold",
          padding: 15,
          margin: 0,
          textAlign: "center",
        };
        var hexTextVis = {
          ...hexText,
          visibility: "visible"
        }
        var hexTextInvis = {
          ...hexText,
          visibility: "hidden"
        }
        var isVisible = this.props.isVisible;
        if (isVisible) {
          return <p style={hexTextVis}>{this.props.color}</p>;
        } else {
        return <p style={hexTextInvis}>{this.props.color}</p>;
        }
      }
    }
    class HexParent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isVisible: false
        };
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(e) {
        this.setState(currentVis => ({isVisible: !currentVis.isVisible}));
        console.log(this.state);
        console.log('clicking');
      }
      render() {
        var fullBoxStyle = {
          padding: 0,
          margin: 10,
          backgroundColor: "#fff",
          boxShadow: "3px 3px 5px #808080",
          boxRadius: "5px 5px",
          height: 200,
          width: 150,
        };
        var buttonStyle = {
          width:150,
          backgroundColor: this.props.color
        }
        return (
          <div style={fullBoxStyle}>
            <span onClick={(e) => this.handleClick()}>
              <ColorSquare color={this.props.color} />  
              <span style={{
                isVisible: this.state.isVisible ? "true" : "false",
              }}>                        
              <HexDisplay color={this.props.color} />
              </span>
            </span>   
          </div>
        );
      }
    }
    ReactDOM.render(
      <div class="colorRow">
        <HexParent color="#ba2c9d" />
        <HexParent color="#2cba90" />
        <HexParent color="#2c9dba" />
      </div>,
      document.querySelector("#container")
    );
  </script>