suanmei
5 years ago
committed by
拾邑
5 changed files with 240 additions and 57 deletions
@ -0,0 +1,69 @@ |
|||
import * as React from 'react'; |
|||
import { Form, Input, InputNumber } from 'antd'; |
|||
|
|||
const { Item } = Form; |
|||
|
|||
const labelCol = { span: 7 }; |
|||
|
|||
export interface SchemaFormProps { |
|||
schema: any; |
|||
data: any; |
|||
} |
|||
|
|||
export interface SchemaFormState { |
|||
data: any; |
|||
} |
|||
|
|||
class SchemaForm extends React.Component<SchemaFormProps, SchemaFormState> { |
|||
constructor(props: SchemaFormProps) { |
|||
super(props); |
|||
|
|||
this.state = { |
|||
data: props.data, |
|||
}; |
|||
} |
|||
|
|||
changeValue = (e: React.ChangeEvent<HTMLInputElement>, key: string): void => { |
|||
const { data } = this.state; |
|||
const value = e.target.value.trim(); |
|||
data[key] = value; |
|||
this.setState({ data }); |
|||
}; |
|||
|
|||
changeNumValue = (value: number | undefined, key: string): void => { |
|||
const { data } = this.state; |
|||
data[key] = value; |
|||
this.setState({ data }); |
|||
}; |
|||
|
|||
render(): JSX.Element { |
|||
const { data } = this.state; |
|||
const { |
|||
schema: { properties }, |
|||
} = this.props; |
|||
|
|||
return ( |
|||
<Form labelCol={labelCol} initialValues={data}> |
|||
{Object.keys(properties).map((key) => ( |
|||
<Item label={properties[key].title} name={properties[key].title}> |
|||
{properties[key].type === 'string' ? ( |
|||
<Input |
|||
onChange={(e): void => { |
|||
this.changeValue(e, key); |
|||
}} |
|||
/> |
|||
) : ( |
|||
<InputNumber |
|||
onChange={(value): void => { |
|||
this.changeNumValue(value, key); |
|||
}} |
|||
/> |
|||
)} |
|||
</Item> |
|||
))} |
|||
</Form> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default SchemaForm; |
Loading…
Reference in new issue