@alifd/field/demo/onchange.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: 关联控制 - controlled
order: 1
---

组件之间的关联控制. `onChange` 统一管理。

---

manage value by `onChange`


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



class App extends React.Component {
    field = new Field(this, {
        onChange: (name, value) => {
            console.log(this.field.getValues());

            switch (name) {
                case 'input':
                    this.field.setValue('sync', `change to: ${value}`);
                    break;
                case 'select':
                    this.field.setValue('sync', `${value} is coming`);
                    break;
                case 'range':
                    this.field.setValue('sync', ` (${value.join(',')}) ready`);
                    break;
            }
        }
    });

    render() {
        const {init, getValue} = this.field;
        const layout = {
            marginBottom: 10,
            width: 400
        };

        return (<div>
            <Input placeholder="controlled by onChange" {...init('input')} style={layout}/><br/>
            <Input placeholder="under control" {...init('input')} style={layout}/><br/>

            <Select style={layout} {...init('select', {initValue: 'lucy'})}>
                <Select.Option value="jack">jack</Select.Option>
                <Select.Option value="lucy">lucy</Select.Option>
                <Select.Option value="disabled" disabled>disabled</Select.Option>
                <Select.Option value="hugo">hugo</Select.Option>
            </Select><br/>

            {
                getValue('select') !== 'hugo' ?
                    <Range
                        style={{...layout, marginTop: 30}}
                        slider={'double'} scales={10} marks={10}
                        {...init('range', {initValue: [20, 40], trigger: 'onProcess'})}
                    /> : null
            }
            <br/>

            <hr style={{marginBottom: 10}}/>
            <Input placeholder="everyone can control me" {...init('sync')} style={layout}/><br/>
        </div>);
    }
}

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