@alifd/field/demo/mix.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: 组合使用 - mix usage
order: 8
---

多组件混合使用

---

multi type of component


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


const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

const list = [
    {
        value: 'apple',
        label: 'apple'
    }, {
        value: 'pear',
        label: 'pear'
    }, {
        value: 'orange',
        label: 'orange'
    }
];
const layout = {
    marginBottom: 10,
    width: 400
};

class App extends React.Component {
    field = new Field(this);

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

        return (<div className="demo">
            <div style={{marginBottom: 10}}>
                <RadioGroup {...init('radiogroup', {initValue: 'a'})} >
                    <Radio value="a">A</Radio>
                    <Radio value="b">B</Radio>
                    <Radio value="c">C</Radio>
                    <Radio value="d">D</Radio>
                </RadioGroup>
            </div>

            {
                getValue('radiogroup') !== 'd' ?
                    <Select {...init('name', {initValue: 'lucy'})} style={layout}>
                        <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="hugohua">hugohua</Select.Option>
                    </Select> :
                    <Input {...init('name', {initValue: 'frankqian'})} />
            }
            <br/>

            <Range style={{...layout, marginTop: 30}} slider={'double'} scales={10}
                marks={10} {...init('range', {initValue: [20, 40]})}/>

            <div style={{marginBottom: 10}}>
                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {initValue: ['apple']})} />
            </div>
            <div style={{marginBottom: 10}}>
                <DatePicker {...init('datepicker')}/>
            </div>
            <div style={{marginBottom: 10}}>
                <DatePicker.RangePicker {...init('rangepicker')}/>
            </div>
            <div style={{marginBottom: 10}}>
                <TimePicker {...init('timepicker')}/>
            </div>
            <Button type="primary" onClick={() => {
                console.log(this.field.getValues());
            }}>getValues</Button>
            <Button onClick={() => {
                this.field.setValues({
                    name: 'hugohua',
                    range: [30, 50],
                    checkboxgroup: ['orange'],
                    radiogroup: 'd'
                });
            }}>setValues</Button>
            <Button onClick={() => {
                this.field.reset();
            }}>reset</Button>
        </div>);
    }
}


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

````

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