Question

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

我身边有一个圆圈。我想要做的是，Head默认是有效的，所以圆形边框应该是红色，直到其总面积的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>
     )  
 }
}

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

0 个答案: