Question

如果用户在提交后将其重定向到step2schema，则从步骤1下拉菜单开始，如果他在提交到step3schema后选择两个重定向他。这是jsfiddle（查看我的链接）：

＆＃13;

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}/>
    );
  }
}

＆＃13;

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

＆＃13;

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

这是我用于文档的lib：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 ] }

React json架构表单关系

1 个答案: