antd ui的from使用问题

select 的allowClear失效问题

select的value与allowClear同时使用会导致allowClear失效

解决方法

from包装一层，通过const [form] = Form.useForm();



实现value

Form.Item 内使用自定义组件，获取设置值的方式

Form会传递2个参数

const {onChange,value}=props

在自定义组件内

onChange（value） value={value}

eg:

 const findChange=(name,value)=>{
      onChange(value)
     ///一些操作
  }
<Select
        value={value}
        onChange={(e) => findChange(props.valueName, e)}
      >
        {option.map((v, i) => {
          return (
            <Option key={i} value={v.value}>
              {v.label}
            </Option>
          );
        })}
      </Select>

form 动态添加中，对数组值进行设置

    (e) => ChangeSet(key, e)

const ChangeSet(index,value)=>{
    const fields = form.getFieldsValue();        //获取值
    const { data } = fields;          //Form.List的name="data"
    Object.assign(data[index], { per_code: value });//需要设置的值(data[index], { type: value })
    form.setFieldsValue({ ...data });
}

按钮设置

form.submit()触发 Form的onFinish方法

const footer = () => {
    return (
      <Space>
        <Button type="primary" onClick={()=>form.submit()} loading={loading}>
          确定
        </Button>
        <Button onClick={onCancel}>取消</Button>
      </Space>
    );
  };