带有 react-jsonschema-form lib 的后退按钮

Question

使用这个库让我可以用 react 用 json 模式编写表单（我需要它来更好地控制和查看我的表单以满足我的动态需求）我想实现一个后退按钮，让我从当前表单转到上一个表单，这是文档：https : //github.com/mozilla-services/react-jsonschema-form，我没有发现与我的问题相关的任何内容。

为了测试，我将给出与我的案例类似的这个 js 小提琴示例：

https://jsfiddle.net/sn4bnw9h/1/

const Form = JSONSchemaForm.default;
const schema = {
  title: "react-jsonschema-form demo",
  type: "object",
  required: ["name"],
  properties: {
  	name: {type: "string", minLength: 3},
    description: {type: "string"}
  }
};
const uiSchema = {
  description: {
    "ui:widget": "textarea"
  }
};

function Tpl(props) {
  const {id, classNames, label, help, required, description, rawErrors=[], children} = props;
  return (
    <div className={classNames}>
      <label htmlFor={id}>{label}{required ? "*" : null}</label>
      {description}
      {children}
      {rawErrors.map(error => <div style={{color: "blue"}}><h1>{error}</h1></div>)}
      {help}
    </div>
  );
}

React.render(<Form schema={schema} uiSchema={uiSchema} FieldTemplate={Tpl} liveValidate/>, 
             document.getElementById("main"));

<div class="container">
  <div id="main"></div>
</div>

我想要的输出应该是：在那里实现一个后退按钮，当按下后退按钮时，该按钮将使您在从第 2 步提交后返回到第 1 步。它可以添加一些uiSchema，但我不知道确切地使用什么。我已经尝试过，backButton: {type: "button", title: 'Back'}但它不起作用。

Answer 1

您可以通过向组件添加子项来控制出现在 react-jsonschema-form 底部的按钮。插入具有相应onClick功能的后退按钮。

 <Form 
    schema={this.state.step === 1 ? step1schema : step2schema}
    onSubmit={this.onSubmit}
    formData={this.state.formData}>
    { this.state.step > 1 &&
        <button type="button" onClick={this.handleBack} className="btn btn-secondary">Back</button>
    }
    <button type="submit" className="btn btn-primary">Submit</button>
</Form>

一个工作版本在这里：https : //jsfiddle.net/Lrdz6p5y/