我是ReactJS的新手,目前我在界面上使用ant.design
,在ant.design
中,我在向导形式中使用Switch Steps。我想在单击时更改“下一步按钮”样式。我是这个平台的新手,请引导我
谢谢
答案 0 :(得分:1)
因此,要更改加载状态,您可以将文档中的示例修改为:
LEFT JOIN
当单击下一步时,这将导致按钮进入加载状态。但是,您需要将一些外部事件输入到组件中,以告知何时删除加载状态。
这可以通过使month_name year_name month_no work_orders
December 2018 12 3
November 2018 11 0
October 2018 10 5
从父组件中更改并在import { Steps, Button, message } from 'antd';
const Step = Steps.Step;
const steps = [{
title: 'First',
content: 'First-content',
}, {
title: 'Second',
content: 'Second-content',
}, {
title: 'Last',
content: 'Last-content',
}];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
loading: false
};
}
next() {
const current = this.state.current + 1;
this.setState({ current, loading: true });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
render() {
const { current, loading } = this.state;
return (
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title} />)}
</Steps>
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{
current < steps.length - 1
&& <Button type="primary" loading={loading} onClick={() => this.next()}>Next</Button>
}
{
current === steps.length - 1
&& <Button type="primary" loading={loading} onClick={() => message.success('Processing complete!')}>Done</Button>
}
{
current > 0
&& (
<Button loading={loading} style={{ marginLeft: 8 }} onClick={() => this.prev()}>
Previous
</Button>
)
}
</div>
</div>
);
}
}
中进行检测来实现,您可以在其中进行this.prop
或通过使componentWillReceiveProps
调用一些异步方法,可在其回调中重置加载状态。