Arrays 如何在按下按钮时向数组添加值（遇到问题）

我正在设置一个多页表单，并将步骤分配给一个数组

我想弄清楚的是，按下按钮向表单中添加新页面的最佳方式。我的解决方案是构建表单的新页面（尽管有20个副本，每个都有自己的变量）

然后我有一个标签为“addnew”的按钮，它调用一个函数向数组中添加新行，从而启用下一页

当然，理想情况下，我的第一个解决方案是让react自动构建一个新页面和变量，但我不确定这样做是否可行

steps.js：

从“React”导入React
从“/StepOne”导入{StepOne}
从“/StepTwo”导入{StepTwo}
从“/StepThree”导入{StepThree}
常数步长=
[
{name:'作业'，组件：}，
{name:'设备1'，组件：}，
]
导出{steps}

home.js（我的表单所在的位置）

import React，{Component}来自“React”；
从“反应引导/按钮”导入按钮；
从“react引导/表单”导入表单；
从“反应多步骤”导入多步骤
从“./steps”导入{steps}
进口{
路线,，
导航链接，
哈希路由器
}从“反应路由器dom”；
从“/new device”导入新设备；
类Home扩展组件{
render（）{
返回(
开始新工作
按“回车”键或单击进度条进入下一步。
);
}
}
导出默认主页；

Step2.js

从“React”导入React
从“./steps”导入{steps}
从“/StepThree”导入{StepThree}
从“react addons update”导入更新；
导出类Step2扩展React.Component{
addNew（）{
this.setState（previousState=>({
步骤：[…previousState.steps，“{name:'设备2'，组件：}，”]
}));
}
添加新设备
)
}
}

如果您想查看表单的整个页面以获得更好的想法，请使用完整的step2.js

从“React”导入React
从“./steps”导入{steps}
从“/StepThree”导入{StepThree}
从“react addons update”导入更新；//ES6
// 
导出类Step2扩展React.Component{
addNew（）{
this.setState（previousState=>({
步骤：[…previousState.steps，“{name:'设备2'，组件：}，”]
}));
}
构造函数（）{
超级（）
this.state={
框：“”，
VIN:“”，
Lbl:“”，
年份：''，
制作：''，
型号：''，
车牌号：''，
奥多：''，
注：''，
}
this.handleBoxChanged=this.handleBoxChanged.bind（this）；
this.handleVINChanged=this.handleVINChanged.bind（this）；
this.handleblchanged=this.handleblchanged.bind（this）；
this.handleYearhanged=this.handleYearChanged.bind（this）；
this.handleMakeChanged=this.handleMakeChanged.bind（this）；
this.handleModelChanged=this.handleModelChanged.bind（this）；
this.handlePlateChanged=this.handlePlateChanged.bind（this）；
this.handleODOChanged=this.handleODOChanged.bind（this）；
this.handleNotesChanged=this.handleNotesChanged.bind（this）；
}
车把盒更换（事件）{
this.setState（{Box:event.target.value}）
}
手动更改（事件）{
this.setState（{VIN:event.target.value}）
}
handleblchanged（事件）{
this.setState（{Lbl:event.target.value}）
}
handleYearChanged（事件）{
this.setState（{Year:event.target.value}）
}
handleMakeChanged（事件）{
this.setState（{Make:event.target.value}）
}
handleModelChanged（事件）{
this.setState（{Model:event.target.value}）
}
handlePlateChanged（事件）{
this.setState（{Plate:event.target.value}）
}
handleODOChanged（事件）{
this.setState（{ODO:event.target.value}）
}
handleNotesChanged（活动）{
this.setState（{Notes:event.target.value}）
}
渲染（）{
返回(
装置#
VIN
标签
年
制作
模型
盘子
奥多
笔记
添加新设备
)
}
}

主要问题是您试图在

step2

组件内调用

setState

，但没有将步骤存储在组件的状态中

您正在使用一个单独的

.js

文件来存储步骤。这样，当步骤数组发生更改时，React不会收到通知，因此不会更新（在某些时候，当它由于其他原因被渲染时，它会更新，但您通常不希望这样）

查看

react multistep

docs，它们似乎不提供更新步骤数组的方法，也不允许您将其他道具传递给表单组件

考虑到您不想引入像

redux

或

mobx

这样的状态管理库，我认为有两种方法可以解决这个问题：
1.使用React的上下文API将状态和更新函数传递给表单组件
2.创建一个

react multistep

分支，将传递给

multistep

组件的道具传递给表单组件-库非常小（基本上只有一个小组件）。这样，您将能够使用组件的状态

具有上下文API的解决方案：

import React，{Component}来自“React”；
从“反应引导/按钮”导入按钮；
从“反应引导”导入表单/表单
import React from 'react'
import { StepOne } from './StepOne'
import { StepTwo } from './StepTwo'
import { StepThree } from './StepThree'



const steps = 
    [
      {name: 'Job', component: <StepOne/>},
      {name: 'device 1', component: <StepTwo/>},

    ]

export { steps }

import React, { Component } from "react";
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import MultiStep from 'react-multistep'
import { steps } from './steps'
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import newdevice from "./new-device";


class Home extends Component {
  render() {
    return (
        <div>
        <h1>Start a New Job</h1>

        <div className='container'>
    <div>
      <MultiStep steps={steps} />
    </div>
    <div className='container app-footer'>
      <h6>Press 'Enter' or click on progress bar for next step.</h6>
    </div>
</div>
        </div>

    );
  }
}

export default Home;

import React from 'react'
import { steps } from './steps'
import { StepThree } from './StepThree'
import update from 'react-addons-update';


export class StepTwo extends React.Component {

    addNew() {
      this.setState(previousState => ({
        steps: [...previousState.steps, "{name: 'device 2', component: <StepThree/>},"]
      }));
  }
        <div className='row'> 
        <div className="col-md-4">
        <button  onClick={this.addNew} variant="primary">Add a New Device</button>
        </div>
        </div>
      </div>
    )
  }
}

import React from 'react'
import { steps } from './steps'
import { StepThree } from './StepThree'
import update from 'react-addons-update'; // ES6
// 


export class StepTwo extends React.Component {

    addNew() {
      this.setState(previousState => ({
        steps: [...previousState.steps, "{name: 'device 2', component: <StepThree/>},"]
      }));
  }



  constructor () {
    super()
    this.state = { 
      Box: '', 
      VIN: '',
      Lbl: '',
      Year: '',
      Make: '',
      Model: '',
      Plate: '',
      ODO: '',
      Notes: '',
    }
    this.handleBoxChanged = this.handleBoxChanged.bind(this);
    this.handleVINChanged = this.handleVINChanged.bind(this);
    this.handleLblChanged = this.handleLblChanged.bind(this);
    this.handleYearhanged = this.handleYearChanged.bind(this);
    this.handleMakeChanged = this.handleMakeChanged.bind(this);
    this.handleModelChanged = this.handleModelChanged.bind(this);
    this.handlePlateChanged = this.handlePlateChanged.bind(this);
    this.handleODOChanged = this.handleODOChanged.bind(this);
    this.handleNotesChanged = this.handleNotesChanged.bind(this);
  }

  handleBoxChanged (event) {
    this.setState({Box: event.target.value})
  }
  handleVINChanged (event) {
    this.setState({VIN: event.target.value})
  }

  handleLblChanged (event) {
    this.setState({Lbl: event.target.value})
  }

  handleYearChanged (event) {
    this.setState({Year: event.target.value})
  }

  handleMakeChanged (event) {
    this.setState({Make: event.target.value})
  }

  handleModelChanged (event) {
    this.setState({Model: event.target.value})
  }

  handlePlateChanged (event) {
    this.setState({Plate: event.target.value})
  }

  handleODOChanged (event) {
    this.setState({ODO: event.target.value})
  }

  handleNotesChanged (event) {
    this.setState({Notes: event.target.value})
  }


  render () {
    return (
      <div>
        <div className='row'>
          <div className='six columns'>
            <label>Device #</label>
            <input
              className='u-full-width'
              placeholder='Device #'
              type='text'
              onChange={this.handleBoxChanged}
              value={this.state.Box}
              autoFocus
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>VIN</label>
            <input
              className='u-full-width'
              placeholder='VIN'
              type='text'
              onChange={this.handleVINChanged}
              value={this.state.VIN}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Label</label>
            <input
              className='u-full-width'
              placeholder='Label'
              type='text'
              onChange={this.handleLblChanged}
              value={this.state.Lbl}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Year</label>
            <input
              className='u-full-width'
              placeholder='Year'
              type='text'
              onChange={this.handleYearChanged}
              value={this.state.Year}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Make</label>
            <input
              className='u-full-width'
              placeholder='Make'
              type='text'
              onChange={this.handleMakeChanged}
              value={this.state.Make}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Model</label>
            <input
              className='u-full-width'
              placeholder='Model'
              type='text'
              onChange={this.handleModelChanged}
              value={this.state.Model}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Plate</label>
            <input
              className='u-full-width'
              placeholder='VPlateIN'
              type='text'
              onChange={this.handlePlateChanged}
              value={this.state.Plate}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>ODO</label>
            <input
              className='u-full-width'
              placeholder='ODO'
              type='text'
              onChange={this.handleODOChanged}
              value={this.state.ODO}
            />
          </div>
        </div>
        <div className='row'>
          <div className='six columns'>
            <label>Notes</label>
            <input
              className='u-full-width'
              placeholder='Notes'
              type='text'
              onChange={this.handleNotesChanged}
              value={this.state.VIN}
            />
          </div>
        </div>
        <div className='row'> 
        <div className="col-md-4">
        <button  onClick={this.addNew} variant="primary">Add a New Device</button>
        </div>
        </div>
      </div>
    )
  }
}