Question

我在reactjs中创建了一个4步骤的表单。

主要组件是在其中加载子组件。

当用户填写一个表格并按下继续时，它应该保存表格1的值并加载表格2代替表格1。我将如何实现它。

表格1

crti.o

主要组成部分：

crtbegin.o

Answer 1

一种解决方案是将表单数据保留在主组件上，并使用事件处理程序处理更改

鉴于你的例子：

const { data, step } = this.props

return (
  <div>
    {step === 0 && <Form1 data={data} onChange={/**/} />}
    {step === 1 && <Form2 data={data} onChange={/**/} />}
    {step === 2 && <Form3 data={data} onChange={/**/} />}
  </div>
)

每当触发更改时，您都可以控制data以进行相应的更改将它们发送到您的redux商店，州，后端api ...

Answer 2

有两种方法可以做到这一点。在容器App组件中创建每个组件，并具有状态变量控件，应该显示哪个步骤，或者创建相互链接的子路径。

第一种方法的例子：

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      step: 0
    };
  }
  
  nextStep = () => {
    this.setState((prevState) => ({step: prevState.step + 1}));
  }
 
  render() {
    let {step} = this.state;
    let form = [<Form1 />, <Form2 />, <Form3 />];
    return(
      <div>
        {form[step]}
        {form.length-1 > step && <button onClick={this.nextStep}>Next</button>}
      </div>
    );
  }
}

const Form1 = () => <div>Form 1</div>;
const Form2 = () => <div>Form 2</div>;
const Form3 = () => <div>Form 3</div>;
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

在一个组件中加载不同的组件 - reactjs

2 个答案: