This will render the entire form with its widgets including category selection.
Note:implementation details ofTaxonomyRestServicewas omitted for brevity.
Note 2:this example uses internal component state, but maybe this is not the best way to manage data if you are working in a large scale application. If so, you should use something likeredux. To be inspired, take a look atthis example.
Dealing with data
You can pass some data to the <Form>. That data should follow the schema pattern.
state: State={
data:{
id:'123',
name:'Panel name',
// other props
},
schema:{},
};
render(){
const{data,schema}=this.state;
<Form
data={data}
schema={schema}
/>
}
To watch data updates, you can use onChangeFormData prop.
render(){
const{data,schema}=this.state;
<Form
data={data}
schema={schema}
onChangeFormData={this.handleDataChange}
/>
}
handleDataChange=(data:FormData)=>{
this.setState({data});
}
Note:seeModelspage for more details inFormDatamodel.
Submission
<Form> renders a Submit button internally and you can listen its click events by using onSubmit prop.
render(){
const{data,schema}=this.state;
<Form
data={data}
schema={schema}
onChangeFormData={this.handleDataChange}
onSubmit={this.handleSubmit}
/>
}
handleSubmit=(data:FormData)=>{
console.log('Form data submitted',data);
}
Extra-schema fields
Sometimes we need to render some fields that doesn't belong to Taxonomy schema. It's quite simple to do this. All you need to do is to pass whatever you want as a child of <Form> component. For example:
That's it! This is what you need to render a basic form.
As you may have noticed, a Back button and a JSON Debugger was rendered by <Form>, but they are not working. You can watch their events as well. Please see API Reference section for more details.
