反应 json 模式形式的关系

Question

如果用户在提交后选择一个，则从第 1 步下拉列表将其重定向到 step2schema，如果他在提交到 step3schema 后选择两个，则将他重定向。这是jsfiddle（检查我的链接）：

const Form = JSONSchemaForm.default;
const step1schema = {
  title: "Step 1",
  type: "number",
  enum: [1, 2],
  enumNames: ["one", "two"]
  
};
const step2schema = {
  title: "Step 2",
  type: "object",
  required: ["age"],
  properties: {
    age: {type: "integer"}
  }
};

const step3schema = {
  title: "Step 3",
  type: "object",
  required: ["number"],
  properties: {
    number: {type: "integer"}
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {step: 1, formData: {}};
  }
  
  onSubmit = ({formData}) => {
  	if (this.state.step === 1) {
      this.setState({
        step: 2,
        formData: {
          ...this.state.formData, 
          ...formData
        }, 
      });
    } else {
      alert("You submitted " + JSON.stringify(formData, null, 2));
    }
  }
  
  render() {
    return (
      <Form 
        schema={this.state.step === 1 ? step1schema : step2schema}
        onSubmit={this.onSubmit}
        formData={this.state.formData}/>
    );
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://npmcdn.com/react-jsonschema-form@1.0.0/dist/react-jsonschema-form.js"></script>
<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>

https://jsfiddle.net/bogdanul11/sn4bnw9h/29/

这是我用于文档的库：https://github.com/mozilla-services/react-jsonschema-form

为了达到我想要的行为，我需要改变什么？

Answer 1

将您的状态替换为第一个

this.state = {step: 0, formData: {}};

然后将您的onSubmit 逻辑替换为

onSubmit = ({formData}) => {
  const submitted = formData;
    this.setState({
      step: submitted,
      formData: {
        ...this.state.formData, 
        ...formData
      }, 
  })
}

最后替换你的架构逻辑

schema={this.state.step === 0 ? step1schema : ( this.state.step === 1 ? step2schema : step3schema)}

模式选择三元运算就是我们所说的复合三元运算。如果 state.step 是 0 ，我们选择 step1schema... 如果不是新的选择语句 ( this.state.step === 1 ? step2schema : step3schema) 运行；其中，如果 step 为 1，则选择 step2schema，否则选择 step3schema。

假设您有超过 3 个架构并且您想要访问它们。为此，您必须在数组中定义模式并使用索引访问它们。

schemaArray = [ {
    // schema1 here
} , {
    // schema2 here
} , {
    // schema3 here
}, {
   // schema4 here
}, {
   ....
}]

现在你的架构选择你将不得不使用

schema = { schemaArray[ this.state.step ] }