时间戳

首页 > 解决方案 > 反应连接 2 个按钮

forms - 反应连接 2 个按钮

问题描述

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

这是可视化： https://imgur.com/a/VDfxgDp

问题是我有这样的结构：

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

标签： formsreactjsbuttonreduxcomponents

解决方案

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

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 以控制实际呈现的形式。

推荐阅读