react 项目中，选中一条信息，自动带出对应的信息

项目中常遇到，选中了某个搜索框，然后form 中的某个，或者某几个数据被自动带出。
例如，我选中了经办人，带出了部门信息
下边是一个经办人的弹框信息。这里的部门我取得是- 所属组织名称

选中后自动带出赋值到部门，

但是部门也可以重新选择覆盖，还要把值传递给后台，
这个是部门的弹框

重新选择后的部门赋值。

那么我们看一下怎么处理代码吧。

操作的按钮比较多，我们就用 编辑 的效果来测试了
首先我们肯定有一个基础信息的文件，然后有js代码文件。
我们点击了编辑后，都会首先调取接口获取数据。
假设我们没域部门信息，那么我们就可以来实现编辑效果了。

我们看上图，会在最外层的index 页面的 钩子函数中
componentDidMount（）{
if (this.state.typa === ‘create’){ // 如果是新增按钮
}else{// 如果是编辑
this.getDetail(this.state.type); // 这里的type是传过来的 type: this.props.match.params?.type,
}
}
然后我么就调用getDetail 这个方法进行查看详情信息

  getDetail = async (data) => {
    this.setState({ loading: true });
    const res1 = await service.searchBasic({ id: data }) 
    this.setState({ loading: false });
    if (res1.success) {
      const data = this.transBasicFormData(res1.data);
      this.setState({
        formData: data,
      });
    } else {
      ElNotification({
        type: 'error',
        message: res1.msg || res1.data || '操作失败！'
      });
    }
  };

  //查询返回数据后 特殊处理
  transBasicFormData = (data) => {
    this.basicHiddenData = {
      ...this.basicHiddenData,
      settleEntityAddrNo: data.settleEntityAddrNo,
    }
    return {
      ...data,
      settleEntityId: { // 结算主体
        id: data.settleEntityId,
        ouName: data.settleEntityName,
        addrNo: data.settleEntityAddrNo
      },
      // 经办人
      operator: {
        operatorId: data.operatorId,
        empName: data.operator
      }
      deptId: { // 部门
        id: data.deptId,
        buName: data.deptName
      },
    }
  }

保存的功能也直接写上了，

// 保存按钮触发
  beforeSave = async () => {
    const data = await this.proceData();
    // console.log('params=================', data);
    data && this.save(data);
  };
  // 处理数据
  proceData = async () => {
    const { formRef} = this.state;
    const formDataRes = await formRef.validateFields();
    const params = {
      ...this.state.formData,
      ...this.basicHiddenData,
      ...formDataRes,
      processTime: formDataRes.processTime.replace(' ', 'T'),
      settleEntityId: formDataRes.settleEntityId?.id, // 结算主体信息
      settleEntityName: formDataRes.settleEntityId?.ouName,
      detailsSaveVOS: tableArr, // 编辑表格信息行内容
      operatorId: formDataRes.operator?.id, // 经办人信息
      operator: formDataRes?.operator.empName,
      deptId: formDataRes.operator?.buId || formDataRes.deptId?.id, // 关联部门信息 或后边就是单独选择部门的时候进行的赋值，前边是带出的信息
      deptName: formDataRes.operator?.buName || formDataRes.deptId?.buName,
    };
    return params;
  };

那么我们看怎么关联form信息的数据自动带出。

先看下我们基础信息配置页面config

js 文件index

注意不要 忘记定义areaRef

完整如下

	import React from 'react';
	import ElForm from '@/components/el/ElForm';
	import { getFormItems } from './config';
	
	interface Props {
	  onRef: Function;
	  formRef: any;
	  formData: any;
	  type: any;
	  onValuesChange?: Function
	}
	
	class BaseForm extends React.Component<Props> {
	  constructor(props) {
	    super(props);
	    this.state = {
	      areaRef: null
	    }
	  }
	
	  /**
	   * 基本信息改变
	   * @param changedFields 改变的字段信息
	   */
	  onValuesChange = async (changedFields) => {
	    console.log('onValuesChange', changedFields); // 拿到获取的form 信息值
		if (changedFields.operator) {// 经办人
	      this.props.formRef.setFieldsValue({
	          deptId: changedFields.operator?.buName, // 部门
	          // 如果你想带出更多的信息可以直接进行赋值就行了。当然要是在这个经办人能带出来的，
	          或者继续上述if的操作做其他的带出信息
	      });
	    }
	  };
	
	  areaRef = (ref) => {
	    this.setState({
	      areaRef: ref
	    });
	  };
	
	  render() {
	    return (
	      <ElForm
	        onRef={this.props.onRef}
	        formProps={{
	          onValuesChange: this.onValuesChange,
	          items: getFormItems(
	            this.props.type,
	            this.props.formData,
	            // this.setDisabledDate
	            this.areaRef,
	          ),
	        }}
	        data={this.props.formData}
	      />
	    );
	  }
	}
	
	export default BaseForm;