当在 reactjs 中单击其他文件中的按钮时，我如何使进度条取得进展

Question

我是 reactjs 的新手，我有一个问题。我有两个按钮，用户单击其中一个。当用户单击第一个按钮时，onClick 函数在同一个 js 文件中，我找到了通过单击移动进度条的解决方案。当用户单击第二个按钮时，onClick 函数在其他 js 文件上，我不知道发生这种情况时如何取得进展。下面是我的代码：

   import .....
   
   const testData = [
      { bgcolor: "#6a1b9a" },

   ];

   class myclass extends Component {

   state = {
       percetange: 0,
   }

   myedit = () => {
      this.setState({percentage: this.state.percentage + 10});
   }        

    render(){
     return{
        <div>
         <h3> <h2> Choose one button </h2>
             <button style={{color:this.state.mycolor}} className="myword" onClick={this.myedit}> 
                 Button1 
              </button> 
          <h2>or</h2> 
          <MyOtherButton /> 
          </h3>
          {testData.map((item, idx) => (
            <ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} />
           ))}
          <br />
         </div>
     }
    }
   }

   
   import .....
   const testData = [
      { bgcolor: "#6a1b9a" },

   ];

   class MyOtherButton extends Component {
     
     state = {
       percetange: 0,
     }

     myfunc = () => {
      this.setState({percentage: this.state.percentage + 10});
     }

     render() {
      return (
      <div>
       <button className="myword" onClick={this.myfunc} > 
                Button2 </button> 
       {testData.map((item, idx) => (
            <ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} />
        ))}                                                                                                     
      </div>
     )
    }
   }

   import ....
   const ProgressBar = (props) => {
         const { bgcolor, completed } = props;
         return (
                <div style={containerStyles}>
                 <div style={fillerStyles}>
                    <span style={labelStyles}>{`${completed}%`}</span>
                 </div>
               </div>
         );
    }

通过这种方式，我知道我生成了两个进度条，但是在这种情况下，当单击另一个 js 文件中的按钮时，我如何只生成一个进度条 MyOtherButton 更具体地说，我想制作一个进度条，该进度条通过单击其中一个按钮来取得进展。

Answer 1

您可以创建一个具有百分比状态的父组件，并将其传递给进度条组件。然后在父组件中创建一个方法来更改进度值并将其传递给您的两个按钮组件。

当在 reactjs 中单击其他文件中的按钮时，我如何使进度条取得进展

How i can make progress bar make progress when click a button in other file at reactjs

javascript

button

progress-bar

reactjs