[英]How i can make progress bar make progress when click a button in other file at reactjs
i am new in reactjs and i have a problem.我是 reactjs 的新手,我遇到了问题。 I have two buttons and user click one of them.
我有两个按钮,用户单击其中一个。 When user click the first button the onClick function is in the same js file and i have find a solution to move progress bar by click.
当用户单击第一个按钮时,onClick function 在同一个 js 文件中,我找到了通过单击移动进度条的解决方案。 When the user clicked the second button the onClick function is on other js file and i don't know how to make progress when this occur.
当用户单击第二个按钮时,onClick function 位于其他 js 文件上,我不知道发生这种情况时如何取得进展。 Below it's my code:
下面是我的代码:
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>
);
}
With this way i understand that i am generate two progress bar, but how i can generate only one when click the button that is in another js file in this situation MyOtherButton To be more specific i want to make one progress bar and that bar makes progress by clicking one of the buttons.通过这种方式,我知道我正在生成两个进度条,但是当在这种情况下单击另一个 js 文件中的按钮时,如何只生成一个通过单击其中一个按钮。
You could create a parent component with a percentage state and pass it down to the progress bar component.您可以创建一个具有百分比 state 的父组件并将其传递给进度条组件。 Then in the parent component create a method to change the progress value and pass it down to both of your button components.
然后在父组件中创建一个方法来更改进度值并将其传递给您的两个按钮组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.