@alifd/field/demo/valuename.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 valueName
order: 9
---

valueName 的默认值为 value，如果为其他需要用 valueName 指定

---

default valueName is `value`

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

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

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

        return (
            <div className="demo">
                <Radio
                    {...init('radio', {
                        initValue: false,
                        valueName: 'checked',
                    })}
                >
                    {' '}
                    checked
                </Radio>
                <br />
                <Checkbox
                    {...init('checkbox', {
                        valueName: 'checked',
                        initValue: true,
                    })}
                >
                    defaultChecked
                </Checkbox>
                <br />
                <Switch
                    {...init('switch', {
                        valueName: 'checked',
                        initValue: false,
                    })}
                    style={{ marginTop: 10, marginBottom: 10 }}
                />
                <br />

                <Button
                    type="primary"
                    onClick={() => {
                        console.log(this.field.getValues());
                    }}
                >
                    getValues
                </Button>
                <Button
                    onClick={() => {
                        this.field.setValues({
                            radio: true,
                            switch: true,
                            checkbox: false,
                        });
                    }}
                >
                    {' '}
                    setValues{' '}
                </Button>
                <Button
                    onClick={() => {
                        this.field.reset();
                    }}
                >
                    reset
                </Button>
            </div>
        );
    }
}

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

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