react-jsonschema-form lib가있는 뒤로 버튼

이 라이브러리를 사용하면 json 스키마에 react를 사용하여 양식을 작성해 보겠습니다. (동적 요구에 맞는 양식을보다 잘 제어하고 볼 때 필요합니다) 현재 양식에서 이전 양식으로 나를 가져올 것입니다. 여기에 문서가 있습니다 : https://github.com/mozilla-services/react-jsonschema-form, 나는 그 문제와 관련된 것을 찾지 못했습니다.react-jsonschema-form lib가있는 뒤로 버튼

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

const Form = JSONSchemaForm.default; 
 
const schema = { 
 
    title: "react-jsonschema-form demo", 
 
    type: "object", 
 
    required: ["name"], 
 
    properties: { 
 
    \t 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>

이

내 원하는 출력이되어야한다 : 나는 줄 것이다 테스트를 위해

이 내 사건과 유사 바이올린 예 JS 백 버튼이 구현을 그 뒤로를 누르면 2 단계에서 1 단계로 다시 제출 된 후 받게됩니다. 일부 uiSchema를 추가 할 수는 있지만 정확히 무엇을 사용해야할지 모르겠습니다. 나는 backButton: {type: "button", title: 'Back'}으로 시도했지만 작동하지 않습니다.

출처

2017-11-16 Tatu Bogdan

하위 요소를 구성 요소에 추가하여 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/

출처

2018-01-17 02:32:51 jeffgreco

react-jsonschema-form lib가있는 뒤로 버튼

답변

관련 문제