#最新

Javascript技术：React+nodejs提交成功界面

也想出现在这里？点击联系我~

javascript技术：react + nodejs 提交成功界面（包含进度条）。

代码演示

//***frontend/src/pages/businessUser/newPage/newSuccess.js ***
import React from 'react'
import TestTTT from '../../../components/resultPage/testTTT'
import SubmitSuccessPage from '../../../components/resultPage/submitSuccessPage'
import StepProgress, { stepProgress } from '../../../components/resultPage/stepProgress'
export default class NewSuccess extends React.Component {

render(){

	var successItems = { 

		successTitle: "Idea submit Success - RaiseIdea", 
		subTitle: "Idea request number:2020182818828182881 server configuration takes 1-5 minutes, please wait." ,
		homeButtonName:"Return Home",
		gotoButtonName:"Raise New Idea",
		homeRul:"/EUC",
		GotoUrl:"/EUC/NewAutomation/Raiseidea"
	}

	
	var stepItems = [
		
		{ title: "Raise Idea", description: "" },
		{ title: "Prioritize", description: "" },
		{ title: "Pick up Idea", description: "" },
		{ title: "Initial Risk Assessment", description: "" },
		{ title: "Build & Test", description: "" },
		{ title: "UAT", description: "" },
		{ title: "Final Risk Assessment", description: "" },
		{ title: "Go-live", description: "" },
		{ title: "Release", description: "" }
	]
	return (
		<div width='60%'>
			<SubmitSuccessPage successItems ={successItems} />
			<div><br /><br /></div>
			<div><br /><br /></div>
			<StepProgress stepNo='5' stepItems = {stepItems}/>
		</div>
	)
}
}

//**frontend/src/components/resultPage/stepProgress.js **
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './result.css';
import { Steps } from 'antd';

const { Step } = Steps;
export const stepProgress = props => {
    
    const {stepNo} = props
    const {stepItems} = props
    let nStep = stepNo
    var strSteplist = new Array(10)

    for (var i=0;i<stepItems.length;i++){

        strSteplist[i] =  <Step title={stepItems[i]['title']} description={stepItems[i]['description']} />
    }

    return (

       <div>
            <Steps progressDot current={nStep}>
                {strSteplist}
                {/* <Step title={stepItems[0]['title']} description={stepItems[0]['description']} />
                <Step title="Prioritize" description="" />
                <Step title="Pick up Idea" description="" />
                <Step title="Initial Risk Assessment" description="" />
                <Step title="Build & Test" description="" />
                <Step title="Build & Test" description="" />
                <Step title="Final Risk Assessment" description="" />
                <Step title="Go-live" description="" />
                <Step title="Release" description="" /> */}
            </Steps>
       </div>
      
    )
  }
  export default stepProgress

//***frontend/src/components/resultPage/submitSuccessPage.js ***

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import './result.css'
import { Result, Button } from 'antd'

export const submitSuccess = props => {

    //const ideaType =  'Idea submit Success'
  
    const {successItems} = props

    let ideaType = successItems['successTitle']
    let strSubTitle = successItems['subTitle']
    //let ideaType1 = ideaType + this.props
  return (
     <div>
         
            <Result
                status="success"
                title={ideaType}
                subTitle= {strSubTitle}
                extra={[
                <Button type="primary" key="returnHome"
                    onClick={() => {
                        window.location.href = successItems['homeRul']
                    }}
                >
                    {successItems['homeButtonName']}
                </Button>,
                <Button key="NewIdea"
                    onClick={() => {
                        window.location.href = successItems['GotoUrl']
                    }}
                
                >
                    {successItems['gotoButtonName']} </Button>,
                ]}
            />

     </div>
    
  )
}
export default submitSuccess