@alifd/field/demo/topath.md

Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.

---
title: 结构化解析 - Parse Array or Object
order: 11
---
把 `init('obj.b')` 的数据转换成 `obj={obj:{b:'value'}}`；

把 `init('arr.0')` 的数据转换成 `obj={arr:['']}`；

---

from `init('obj.b')` to `obj={obj:{b:'value'}}`；

from `init('arr.0')` to `obj={arr:['']}`；


````jsx
import ReactDOM from 'react-dom';
import React from 'react';
import { Input, Button } from '@alifd/next';
import Field from '@alifd/field';



class App extends React.Component {
    field = new Field(this, {
        parseName: true,
        values: {
            objWithDefaults: {
                a: 1,
                b: 2
            }
        }
    });

    onGetValue() {
        console.log(this.field.getValues());
    }

    onSetValue() {
        this.field.setValues({
            obj: {
                b: 'b',
                c: 'c'
            },
            arr: ['first', 'second'],
            objWithDefaults: {
                a: 100,
                b: 200
            }
        });
    }

    render() {
        const { init, reset, resetToDefault } = this.field;

        return (<div className="demo">
            <h3>Object transfer</h3>
            obj.b: <Input {...init('obj.b', {initValue: 'test1'})} /> &nbsp;
            obj.c: <Input {...init('obj.c', {initValue: 'test2'})} />

            <br/>

            <h3>Array transfer</h3>
            arr.0: <Input {...init('arr.0', {initValue: '0'})} /> &nbsp;
            arr.1: <Input {...init('arr.1', {initValue: '1'})} />
            <br/><br/>

            <h3>Object with Defaults</h3>
            objWithDefaults.a: <Input {...init('objWithDefaults.a')} /> &nbsp;
            objWithDefaults.b: <Input {...init('objWithDefaults.b')} />
            <br/><br/>

            result:
            <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>

            <br/><br/>

            <Button type="primary" onClick={this.onGetValue.bind(this)}>getValues</Button>
            <Button onClick={this.onSetValue.bind(this)}>setValues</Button>
            <Button onClick={() => reset()}>reset</Button>
            <Button onClick={() => resetToDefault()}>resetToDefault</Button>
        </div>);
    }
}


ReactDOM.render(<App/>, mountNode);
````

````css
.demo .next-btn {
    margin-right: 5px;
}
````