import { Button, Form, Input, Select } from 'antd';
import { Store } from 'antd/lib/form/interface';
import { useEffect, useRef, useState } from 'react';
const func = (state: any[],form:any[])=>{
return form?.filter((val:string)=>!state?.includes(val))
}
const options = [{ value: '标品', label: '标品' },
{ value: '定制品', label: '定制品' },
{ value: '专供款', label: '专供款' },
{ value: '大标品', label: '大标品' },
{ value: '其他', label: '其他' }];
const BoliPoint = ()=> {
const [form] = Form.useForm();
const [InputVal,setVal] = useState<Store>({
select:'专供款',
input1:'1',
input2:'2'
});
const ref = useRef<any>();
const change = ()=>{
const data = form.getFieldsValue();
setVal(data)
}
useEffect(()=>{
form.setFieldsValue({
select:'专供款',
input1:'1',
input2:'2'
})
},[])
useEffect(()=>{
if(Object.keys(InputVal).length!==Object.keys(form.getFieldsValue()).length){
form.resetFields([...func(Object.keys(InputVal),Object.keys(form.getFieldsValue())),[]])
change()
}
},[InputVal])
return (
<Form form={form} ref={ref} initialValues={InputVal}>
<Form.Item name='select'>
<Select options={options} onChange={change}/>
</Form.Item>
{InputVal.select &&
<Form.Item name='input1'>
<Input placeholder='input1' onChange={change} />
</Form.Item>
}
{InputVal.input1==='1' &&
<Form.Item name='input2'>
<Input placeholder='input2' onChange={change}/>
</Form.Item>
}
{InputVal.input2==='2' &&
<Form.Item name='input3'>
<Input placeholder='input3'/>
</Form.Item>
}
<Button type='primary' onClick={()=>{
}}>点击</Button>
</Form>
)
}
export default BoliPoint;