70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
/* eslint no-console:0 */
|
|
|
|
import { createForm } from '../index';
|
|
import { regionStyle } from './styles';
|
|
|
|
let uuid = 0;
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
remove(k) {
|
|
const { form } = this;
|
|
// can use data-binding to get
|
|
let keys = form.getFieldValue('keys');
|
|
keys = keys.filter(key => {
|
|
return key !== k;
|
|
});
|
|
// can use data-binding to set
|
|
form.setFieldsValue({
|
|
keys,
|
|
});
|
|
},
|
|
add() {
|
|
uuid++;
|
|
const { form } = this;
|
|
// can use data-binding to get
|
|
let keys = form.getFieldValue('keys');
|
|
keys = keys.concat(uuid);
|
|
// can use data-binding to set
|
|
// important! notify form to detect changes
|
|
form.setFieldsValue({
|
|
keys,
|
|
});
|
|
},
|
|
submit(e) {
|
|
e.preventDefault();
|
|
console.log(this.form.getFieldsValue());
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { getFieldProps, getFieldValue } = this.form;
|
|
getFieldProps('keys', {
|
|
initialValue: [],
|
|
});
|
|
const inputs = getFieldValue('keys').map(k => {
|
|
return (
|
|
<div key={k} style={regionStyle}>
|
|
<input {...getFieldProps(`name${k}`)} />
|
|
<a onClick={this.remove.bind(this, k)}>delete</a>
|
|
</div>
|
|
);
|
|
});
|
|
return (
|
|
<div>
|
|
{inputs}
|
|
<div style={regionStyle}>
|
|
<button onClick={this.submit}>submit</button>
|
|
|
|
<button onClick={this.add}>add</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default createForm()(Form);
|