反应连接 2 个按钮

Question

你好，我有一个疯狂的问题：

这是可视化：

问题是我有这样的结构：

1) 数组步骤：

|- 步骤一

|- 步骤二

|- 第三步

|- 第四步

2) 组件多步：

{这里是设置步骤的逻辑}

这个组件的结尾是

        <div>
          <button className={this.state.showNextBtn}
                  onClick={this.next}>Next</button>
        </div>

onClick 是将步骤更改为下一步的非常重要的操作。

      next() {
        this.setNavState(this.state.compState + 1)
      }

接下来我要渲染

const StepOneFormValidation = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="name"
        type="text"
        component={renderField}
        label="Username"
        autoFocus
        require/>

      <Field name="email"
       type="email"
        component={renderField}
         label="Email"
        require/>

      <div>
        <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
      </div>
    </form>

那么我该如何连接这个按钮呢？ 我不能以组件形式声明 const 也不能​​以 const 声明组件

所有代码： https://pastebin.com/G47ZSfjM

Answer 1

我在这里看到的两种方式：

1：使用react-router-redux； 你的路线可能是这样的/form/step1 并在提交表单后制作dispatch(push('/form/step2'))，不要忘记创建并应用routerMiddleWare 和history。

2： 将全局状态用于“步进器”或将其状态作为道具传递；想象一下你的全局状态：

{currentStep: 1, validate: {form1: true, form2: false, ...}}

您需要使用 redux 全局控制您的“步进器”状态，或者通过从 <Stepper currentStep={this.props.currentStep}/> 组件传递道具来完成它。

如果将其分解成这样的组件，那么控制和理解应用程序中的所有内容会更容易：

render(){
    return (
       <div>
           <Stepper currentStep={this.props.currentStep}/>
           <Forms currentStep={this.props.currentStep} onSubmit={handleSumbitAndStepSwitching}/>
       </div>
    )
};

并且在<Forms /> 中，您可以使用 Switch-Case 来控制实际呈现的表单。