React.js:单击时如何更改按钮样式

时间:2018-12-07 10:18:44

标签: javascript reactjs ecmascript-6 antd ant-design-pro

我是ReactJS的新手,目前我在界面上使用ant.design,在ant.design中,我在向导形式中使用Switch Steps。我想在单击时更改“下一步按钮”样式。我是这个平台的新手,请引导我

谢谢

1 个答案:

答案 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调用一些异步方法,可在其回调中重置加载状态。