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?.concat({}); form.setFieldsValue({ list: nextList, }); // const { form } = this.props; // const list = form.getFieldValue('list'); // console.log(list, 103); // const nextList = list ? [...list, {}] : [{}]; // form.setFieldsValue({ // list: nextList, // }); }

// 删除 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; ; // getFieldDecorator('list', { initialValue: Object.keys(formVals).length > 0 ? formVals.typeList : [{}] }); getFieldDecorator('list', { initialValue: formVals?.typeList || [{}] }); const list = getFieldValue('list'); // const list = formVals?.typeList || [{}]; 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; getFieldDecorator('list', { initialValue: formVals?.typeList || [{}] }); const list = getFieldValue('list');这样修改，list下面的新增的数据就不会被渲染出来，可以怎么改内容：要在renderContent方法中添加一个判断，如果list的长度小于等于1，就隐藏掉删除按钮。可以修改如下：

{list.length > 1 && (
  <span
    style={{ color: '#1890FF', cursor: 'pointer' }}
    onClick={this.deleteRow.bind(this, index)}
  >
    删除
  </span>
)}