联动组件隐藏时,清空组件值

95 阅读1分钟
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;