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

时间:2017-11-16 08:39:52

标签: javascript json forms reactjs

使用这个库让我在json模式中编写表单with react(我需要它来更好地控制和查看我的表单以满足我的动态需求)我想实现一个后退按钮,这将使我从当前表格到上一个,这里是文档: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"));
&#13;
<div class="container">
  <div id="main"></div>
</div>
&#13;
&#13;
&#13;

我想要的输出应该是:实现一个后退按钮,当按下后退时,将从步骤2提交回到步骤1。 它可以添加一些uiSchema,但我不知道究竟要使用什么。我曾尝试backButton: {type: "button", title: 'Back'},但它不会工作。

1 个答案:

答案 0 :(得分:3)

您可以通过向组件添加子项来控制react-jsonschema表单底部显示的按钮。插入带有相应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/