@alifd/field/demo/same-name.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: 自动卸载同名组件 - same name
order: 6
debug: true
---

2 个组件相同 name，删除其中一个的时候数据要保留.

---

2 Component with same name, while delete one should keep the data.

```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);

    render() {
        return (
            <div>
                {this.state.show ? (
                    <Input.TextArea
                        {...this.field.init('name', { initValue: 'same name' })}
                    />
                ) : null}
                <Button
                    onClick={() => this.setState({ show: !this.state.show })}
                    warning
                    style={{ marginLeft: 4 }}
                >
                    delete
                </Button>
                <br />
                <br />
                {this.state.show2 ? (
                    <Input
                        {...this.field.init('name', { initValue: 'same name' })}
                    />
                ) : null}
                <Button
                    onClick={() => this.setState({ show2: !this.state.show2 })}
                    warning
                    style={{ marginLeft: 4 }}
                >
                    delete
                </Button>

                <br />
                <br />
                <Button
                    onClick={() => {
                        console.log(
                            'value always exist',
                            this.field.getValues()
                        );
                    }}
                >
                    print
                </Button>
            </div>
        );
    }
}

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