reactjs - 如何根据 REACTJS 中的进度填充圆形边框

Question

如何根据所选选项完成圆的边框。这里有四个选项。1.Head 2.Body 3.Script 4.End Note

我旁边有一个圆圈。我想做的是，默认情况下，头部是活动的，所以圆形边框应该是红色，直到其总面积的 25%，然后在选择身体后它应该是 50%。依此类推，最后它应该是 100%。

这是我的代码，我尝试单击其更改文本颜色直到单击 4 次，但我想要上面的那种东西。作为 ReactJS 的初学者，我无法理解这个逻辑。

import React, { Component } from "react";


export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
       title: "Click here",
       color:"red",
       active:false,
      clicks: 0,
    }
 }
 getInitialState() {
  return {
    count: 0
  };
}

 changeTitle = () => {
  this.setState((prevState) => ({
    clicks: prevState.clicks + 1,
    title: "New title",color:"green",active:true,
 }));

 };

 render() {

     return (
     <div>
       <div>count:{this.state.clicks}</div>
       <h1 onClick={this.changeTitle.bind(this)} >Hello World </h1>
       <h1 style={this.state.clicks===1 ? {color:"red"}: 
                 (this.state.clicks===2)?{color:"yellow"}:
                 (this.state.clicks===2)?{color:"black"}:
                 {color:"green"}}>This is Magic: {this.state.title}</h1>;
     </div>
     )  
 }
}

Answer 1

向@Ron 大喊以在 jquery ( https://stackoverflow.com/a/50208291/7956790 ) 中提供答案。使用@Ron 提供的 css。
好的，这是 React 中的渲染函数：

// your previous code
render() {
 return (
  <div id="circle-container">
     <div className="quarter top-left">
       <div className="quarter-fill top-left-fill" onClick={this.handleTopLeftClick}></div>
     </div>
     <div className="quarter top-right">
        <div className="quarter-fill top-right-fill" onClick={this.handleTopRightClick}></div>
     </div>
     <div className="quarter bottom-left">
        <div className="quarter-fill bottom-left-fill" onClick={this.handleBottomLeftClick}></div>
     </div>
     <div className="quarter bottom-right">
        <div className="quarter-fill bottom-right-fill" onClick={this.handleBottomRightClick}></div>
     </div>
  </div>
 );
}

将您的 onClick 侦听器连接到您的弧，例如onClick={this.handleTopRightClick}并将它们绑定到构造函数中：

constructor(props) {
super(props);
   this.handleTopLeftClick.bind(this);
   this.handleTopRightClick.bind(this);
   this.handleBottomLeftClick.bind(this);
   this.handleBottomRightClick.bind(this);
}

现在在你的类中定义你的处理函数：

handleTopLeftClick() { }
handleTopRightClick() { }
handleBottomLeftClick() { }
handleBottomLeftClick() { }