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 = () => {
? ? // 可以在這處理默認(rèn)邏輯 比如你那設(shè)置時間啥的
? ? 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;
