@alifd/field/demo/normalize.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: 自定义返回值 - custom value
order: 2
---

当组件返回的数据和最终期望提交的格式不一致的时候，可以使用 `getValueFormatter` 和 `setValueFormatter` 两个函数做转换。

比如 switch 组件期望上报 0/1, date-picker 组件期望上报 YYYY-MM-DD 这种字符串格式

---

custom get `value` by api `getValueFormatter`
custom set `value` by api `setValueFormatter`


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

class App extends React.Component {

    field = new Field(this);

    render() {
        const init = this.field.init;

        return (<div>
            <Switch {...init('switch', { 
                getValueFormatter: (value, ...args) => { return value === true? 1:0 },
                setValueFormatter: (value, inputValues) => { return value===1? true: false }
                })}/>
            <br/><br/>
            <DatePicker {...init('time', { 
                getValueFormatter: (value, ...args) => { return value.format('YYYY-MM-DD'); },
                setValueFormatter: (value, inputValues) => { return moment(value, 'YYYY-MM-DD'); }
                })} />
            <br/><br/>
            <Button type="primary" onClick={() => {
                console.log(this.field.getValues());
            }}>getValues</Button>
        </div>);
    }
}


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