React 更新表单组件 - 使用 Ant Design 和 Dva 实现动态添加和删除行

import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Form, Input, Modal, Select, Row, Col } from 'antd';

const { Option } = Select; const FormItem = Form.Item;

@Form.create() @connect(({ filterBlock }) => ({ filterBlock,}))class UpdateForm extends PureComponent { constructor(props) { super(props); this.state = { visible: false, formVals: props.record || {}, filterSelect: [], keyId: '', };

this.formLayout = {      labelCol: { span: 4 },      wrapperCol: { span: 18 },    };

this.formLayout1 = {      labelCol: { span: 10 },      wrapperCol: { span: 14 },    };
this.formLayout2 = {      labelCol: { span: 6 },      wrapperCol: { span: 18 },    };

}

componentDidMount() { const { dispatch } = this.props; // eslint-disable-next-line no-unused-vars const { formVals, filterSelect } = this.state; if (formVals.key) { dispatch({ type: 'filterBlock/fetchItemsList', payload: formVals.key, callback: res => { if (res && res.status === 200) { const centerData = res.data.map(item => { return { label: item, value: ${item}, }; }); this.setState({ filterSelect: centerData }); } }, }); } }

handleSave = () => { const { form, okChange, index, record, filterList } = this.props; const { formVals, keyId } = this.state; form.validateFields((err, fieldsValue) => { if (err) return;

  const arrData = fieldsValue.content.reduce((arr, next) => {        const typeList = next.type.map(type => {          return { type, name: next.name };        });
    return arr.concat(typeList);      }, []);

  const nameValue = (filterList || []).find(item => item.id === keyId)?.title;
  const formItem = {        key: keyId || formVals?.key,        value: fieldsValue?.value || nameValue,        typeList: arrData,      };
  console.log(formItem, 80);
  okChange(formItem, index);
  this.handleVisible();    });

};

handleVisible = (flag, record) => { this.setState({ visible: !!flag, formVals: record || {}, });

};

// 添加 add = () => { const { form } = this.props; const list = form.getFieldValue('list') || []; const nextList = [...list, {}]; const content = [...form.getFieldValue('content'), {}]; form.setFieldsValue({ list: nextList, content: content, }); }

// 删除 deleteRow = index => { const { form } = this.props; const list = form.getFieldValue('list'); const content = form.getFieldValue('content');

if (list.length === 1) {      return;
}

form.setFieldsValue({      list: list.filter((item, key) => key !== index),      content: content.filter((item, key) => key !== index),    });

};

projectChange = keys => { const { dispatch } = this.props; // eslint-disable-next-line no-unused-vars const { filterSelect, keyId } = this.state; dispatch({ type: 'filterBlock/fetchItemsList', payload: keys, callback: res => { if (res && res.status === 200) { const centerData = res.data.map(item => { return { label: item, value: ${item}, }; }); this.setState({ filterSelect: centerData, keyId: keys }); } }, });

};

renderContent = formVals => { // console.log(formVals, 144); const { filterSelect } = this.state; const { formLayout, formLayout1, formLayout2 } = this const { form: { getFieldDecorator, getFieldValue }, filterList, } = this.props; ;

const list = formVals?.typeList || [{}];
getFieldDecorator('list', { initialValue: list });
console.log(list, 155);
const selectProps = {      placeholder: '请选择',      optionFilterProp: 'children',      style: {        width: '100%',      },      allowClear: true,      showSearch: true,    };

return (      <Form>        <FormItem key="value" {...formLayout} label="筛选项">          {getFieldDecorator('value', {            rules: [{ required: true, message: '请选择筛选项' }],            initialValue: formVals.value,          })(            <Select {...selectProps} onChange={value => this.projectChange(value)}>              {filterList?.length &&                filterList?.map(items => (                  <Option                    key={items.id}                    value={items.id}                    disabled={(this.props?.sourceData || []).find(item => item.key == items.id)}                  >                    {items.title}                  </Option>                ))}            </Select>          )}        </FormItem>
    ,        {(list || []).map((item, index) => {          return (            <Row>              <Col span={10}>                <FormItem label={`筛选类${index + 1}`} key={index} {...formLayout1}>                  {getFieldDecorator(`content[${index}].type`, {                    rules: [                      {                        required: true,                        message: '请选择筛选类！',                      },                    ],                    initialValue: item.type?.split(','),                  })(                    <Select {...selectProps} mode="multiple">                      {filterSelect.map(item1 => (                        <Option key={item1.label} value={item1.value}>                          {item1.label}                        </Option>                      ))}                    </Select>                  )}                </FormItem>              </Col>
          <Col span={10}>                <FormItem label="别称" key={index} {...formLayout2}>                  {getFieldDecorator(`content[${index}].name`, {                    initialValue: item.name,                    rules: [                      {                        required: true,                        message: '请输入别称',                      },                    ],                  })(<Input placeholder="请输入" />)}                </FormItem>              </Col>
          <Col span={4}>                <div                  style={{ width: '100%', height: '27px', marginTop: '10px', marginLeft: '10px' }}                >                  {index > 0 ? (                    <span                      style={{ color: '#1890FF', cursor: 'pointer' }}                      onClick={this.deleteRow.bind(this, index)}                    >                      删除                    </span>                  ) : null}                  {index === 0 ? (                    <span                      style={{ paddingRight: '12px', color: '#1890FF', cursor: 'pointer' }}                      onClick={this.add}                    >                      新增                    </span>                  ) : null}                </div>              </Col>            </Row>          );        })}      </Form>    );

};

render() { const { children, record } = this.props; const { visible, formVals } = this.state; return ( <> {React.cloneElement(children, { onClick: () => this.handleVisible(true, record), })} <Modal width={800} bodyStyle={{ padding: '15px 30px' }} destroyOnClose title={Object.keys(formVals).length > 0 ? '编辑' : '新建'} visible={visible} onOk={() => this.handleSave()} onCancel={() => this.handleVisible()} maskClosable={false} > {this.renderContent(formVals)} </> ); } }

UpdateForm.defaultProps = { okChange: () => { },};

export default UpdateForm;