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