javascript - react JSON模式形式关系

从步骤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/[email protected]/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

我需要更改些什么才能拥有自己想要的行为？

最佳答案

首先将您的状态替换为

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 ] }