import { Button, Form, Input, Select, Space, DatePicker, Checkbox } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import React from 'react';
const { RangePicker } = DatePicker;
const { Option } = Select;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
const initForm = {
note: 'Hello world!',
gender: 'male',
timerList: [
{
timer: [],
checkFlag: false
}
]
}
const rules = {
note: [{required: true}],
gender: [{required: true}],
customizeGender: [{required: true}],
timerList: [{required: true}],
}
const App = () => {
const [form] = Form.useForm();
const onGenderChange = (value) => {
switch (value) {
case 'male':
form.setFieldsValue({
note: 'Hi, man!',
});
break;
case 'female':
form.setFieldsValue({
note: 'Hi, lady!',
});
break;
case 'other':
form.setFieldsValue({
note: 'Hi there!',
});
break;
default:
}
};
const onFinish = (values) => {
console.log(values);
};
const onReset = () => {
form.resetFields();
};
const onFill = () => {
form.setFieldsValue(initForm);
};
const add = () => {
const list = form.getFieldValue('timerList');
form.setFieldsValue({
timerList: [...list, { timer: [], checkFlag: false }]
})
}
const remove = key => {
const list = form.getFieldValue('timerList');
form.setFieldsValue({
timerList: list.filter((_, index) => index != key)
})
}
const setCheck = () => {
// 可以在这处理默认逻辑 比如你那设置时间啥的
form.setFieldsValue(form.getFieldsValue(true))
}
return (
<Form
{...layout}
form={form}
name="control-hooks"
onFinish={onFinish}
style={{maxWidth: 600,}}
initialValues={
initForm
}
>
<Form.Item name="note" label="Note" rules={rules.note}>
<Input />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={rules.gender}>
<Select placeholder="Select a option and change input text above" onChange={onGenderChange} allowClear>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}>
{({ getFieldValue }) =>
getFieldValue('gender') === 'other' ? (
<Form.Item name="customizeGender" label="Customize Gender" rules={rules.customizeGender}>
<Input />
</Form.Item>
) : null
}
</Form.Item>
<Form.List name="timerList" >
{(fields) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'timer']}
rules={[{ required: true, message: 'Missing timer name' }]}
>
<RangePicker />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'checkFlag']}
valuePropName="checked"
rules={[{ required: true, message: 'Missing checkFlag name' }]}
>
<Checkbox onChange={setCheck} disabled={form.getFieldValue('timerList').some(({ checkFlag }) => checkFlag == true )}>Checkbox</Checkbox>
</Form.Item>
<Button onClick={() => remove(key)}>删除</Button>
<Button onClick={() => add()} block icon={<PlusOutlined />}>添加</Button>
</Space>
))}
</>
)}
</Form.List>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit"> Submit </Button>
<Button htmlType="button" onClick={onReset}> Reset </Button>
<Button type="link" htmlType="button" onClick={onFill}> Fill form </Button>
</Form.Item>
</Form>
);
};
export default App;
