# react-dom-jsonform

> react json dom to the from

Latest version **0.0.3** (published 2017-04-09) · 0 weekly downloads

## Install

```sh
npm install react-dom-jsonform
pnpm add react-dom-jsonform
yarn add react-dom-jsonform
bun add react-dom-jsonform
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2017-04-09 |
| First published | 2017-04-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | zhoujianlin8 |

## Links

- npm: https://www.npmjs.com/package/react-dom-jsonform
- Repository: https://github.com/zhoujianlin8/react-dom-jsonform
- Homepage: https://github.com/zhoujianlin8/react-dom-jsonform#readme
- Issues: https://github.com/zhoujianlin8/react-dom-jsonform/issues
- npm.io page: https://npm.io/package/react-dom-jsonform

## Dependencies (2)

- [message-event](https://npm.io/package/message-event.md) ^0.0.1
- [react-dom-json](https://npm.io/package/react-dom-json.md) ^0.0.5

## Recent versions

- 0.0.3 (latest) — 2017-04-09

## README

## react-dom-jsonform 模块
```
npm install react-dom-jsonform  --save
```
* react-dom-jsonform render  use json to the form

## 使用

````
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import Engine,{register} from '../src/index';
import Input from './test/input';
import Group from './test/group';
register({
    Input,
    Group
});
class Edit extends Component {
    static defaultProps = {
        state: {},
        setState: ()=> {},
        fire: ()=> {}
    };
    getState() {
        return {
            type: 'div',
            state: {},
            data: this.props.state,
            children: this.children
        }
    }
    //重写
    children = [
        {
            type: "Input",
            state: {
                value: '$data.name',
            }
        },{
            type: "Group",
            state: {
                value: '$data.age',
                name: '$data.name'
            }
        }
    ];
    render() {
        return (
            <Engine state={this.getState()} ref="engine" onOk={this.onOk.bind(this)} onCancel = {this.onCancel.bind(this)}/>
        )
    }

    componentDidMount() {
        const engine = this.refs.engine;
        this.engine = engine;
        this.listens(engine, engine.message)
    }
    onOk(engine){
        engine.checkValid().then(()=>{
            this.fetchData();
        })
    }
    fetchData(data){
        this.props.setState(data || this.engine.data)
    }
    onCancel(){
        this.props.fire('OnEditCancel')
    }
}

ReactDOM.render(<Edit />, document.getElementById('container'));

````


＊ 详细使用请看demo

---
_Source: https://npm.io/package/react-dom-jsonform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._