@alifd/field/demo/autounmout.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: 自动卸载 - auto unmount
order: 6
---

autoUnmount 默认为 true，当组件被 unmount 的时候会自动删除数据. autoUnmount 设置为 false 后，会一直保存数据.

---

autoUnmount is true by default, and data will be deleted automatically. Field will keep data while autoUnmount is set to false.

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


class Demo extends React.Component {
    state = {
        show: true,
        show2: true
    }
    field = new Field(this);
    field2 = new Field(this, { autoUnmount: false });

    render() {
        return (
            <div>
                {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}
                <Button
                    onClick={() => {
                        console.log('value auto delete', this.field.getValues());
                    }}
                    style={{marginLeft: 4}}
                >
                    print
                </Button>
                <Button
                    onClick={() => this.setState({ show: false })}
                    warning
                    style={{marginLeft: 4}}
                >
                    delete
                </Button>
                <br />
                <br />
                {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}
                <Button
                    onClick={() => {
                        console.log('value always exist', this.field2.getValues());
                    }}
                    style={{marginLeft: 4}}
                >
                    print
                </Button>
                <Button
                    onClick={() => this.setState({ show2: false })}
                    warning
                    style={{marginLeft: 4}}
                >
                    delete
                </Button>
            </div>
        );
    }
}

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