Question

我是新手做出反应，我正在开发一个向导应用程序，它从每个步骤收集数据，最后使用该数据生成报告。

我使用了1个父组件，然后将这些步骤作为子项附加，但现在我读取的数据只能向下流动，我不知道如何从步骤中获取数据以进行操作。

Flow看起来像这样：

<StepsForm>
  <StepOne/>
  <StepTwo/>
  <StepThree/>
</StepsForm>

我需要垂直吗？

<StepsForm>
  <StepOne>
     <StepTwo>
        <StepThree/>
     </StepTwo>
  </StepOne>

有3个步骤听起来不错，但是如果我将来添加更多步骤将是一团糟，应用程序已经在处理水平流程。

我正在研究这个例子：https://ant.design/components/steps/

仅替换了包含组件的内容字符串。

刚尝试将州作为儿童道具传递，然后从孩子修改，但没有工作。

任何帮助都是适用的。

我的代码：

FormComponent

constructor() {

    super();
    this.state = {
      customers: [],
      selectedCustomer: "",
    };
  }

<StepOne customers={this.props.customers} selectedCustomer={this.state.selectedCustomer} />

的StepOne

export default class StepOne extends Component {
  setClient(value, option){
    this.props.selectedCustomer = "debug" //fails
...  }

 <Select
...   onSelect={this.setClient}
      >

谢谢！

Answer 1

第一种方法绝对是要走的路，第二种方法会造成更大的痛苦。

基本上你可以将一个函数传递给子元素（步骤），以更新父元素中的状态（值）。

了解这一点的一个好方法是看看其他人是如何做到这一点的。我最初写了自己的，然后发现了这个，https://www.npmjs.com/package/react-stepzilla我最终采用并为自己的目的分叉。

另一个候选人是这个，这有点简单 https://www.npmjs.com/package/react-step-wizard

使用其他人的代码并不是一件坏事，重要的是要了解事情是如何工作的，有时它会节省大量工作来使用或调整开源组件。

Answer 2

我很欣赏Mikkel的答案，我将考虑在未来使用更强大的解决方案，但到现在为止我必须结合一些帖子来实现这一目标。

我需要在Ant设计步骤中使用Ant Design autocomplete元素同时更改状态并执行其他操作。

关键是：

StepsForm.jsx

constructor() {
    super();
    this.state = {
      customers: [],
      selectedCustomer: "",
    };
  }
  changeButtonState(event) {
      this.setState({selectedCustomer: event.props.item})
  }

<StepOne 
buttonClick={this.changeButtonState.bind(this)} 
customers={this.props.customers} 
selectedCustomer={this.state.selectedCustomer} />

StepOne.jsx

   setClient(value, option){
    //doing another stuff 
    const name = option.props.children
  }
  <AutoComplete
    style={{ width: 200 }}
    placeholder="Insert"
    onSelect={(option, value) => this.setClient(option,value,this.props.buttonClick(value)  )}>
    {children}
  </AutoComplete>

在步骤表单之间执行步骤应用数据

2 个答案: