react父子组件之间传值的方法

1，需求点击抽屉或者弹窗，可以实现form添加，修改操作，操作之后可以关闭再查询。
2，例如父组件index.js向子组件Drawer中传值和方法
3，解决
（1）index.js父组件中：
步骤一：引入TaskDrawer（import Drawer from './Drawer';）
步骤二：页面主render中引入<TaskDrawer/>
步骤三：

<Drawer
          visible={taskView}
          taskInfo={taskInfo}
          type={type}
          isSearch={isSearch}  //判断是否查询
          doQuery={this.doQuery}
          onClose={this.onClose}
        />

（1）visible控制抽屉的显示和隐藏
（2）type表示点击的按钮是添加（add)还是修改(modify)
（3）taskInfo是点击table当前行时的record，添加时为null
（4）doQuery是调查询接口时的方法

doQuery = () => {
    const { dispatch } = this.props;
    //params是查询的参数
    const { params = {} } = this.state;
    dispatch({
      type: 'A/B',
      payload: params,
    }).then(rsp => {
      const dataSource = [];
      if (rsp.success && rsp.result.length > 0) {
        rsp.result.map(item => {
        //dataSource是table的数据源
          const { taskConf, taskCount, serviceConfView } = item;
          dataSource.push({ ...taskConf, taskCount, serviceInfo: serviceConfView || {} });
        });
      }
      this.setState({ dataSource });
    });
  };

其中：params需要在form的handleSubmit中获取

handleSubmit = e => {
    e.preventDefault();
    const {
      form: { validateFields },
    } = this.props;
    validateFields((err, values) => {
      if (err) {
        return;
      }
      this.setState({ dataSource: [] });
      const { id } = values;
      const params = { ...values, id: id || 0 };
      //设置params, isSearch的值
      this.setState({ params, isSearch: true }, () => {
        this.doQuery();
      });
    });
  };

（5）onClose是弹窗关闭的方法，主要是回到初始值

onClose = () => {
    this.setState({
      taskView: false,
      taskInfo: null,
      type: '',
    });
  };

步骤四：新增和修改的写法
（1）新增操作

<Button style={{ marginLeft: 8 }} onClick={() => this.addTask(null, 'add')}>
                新增
              </Button>

addTask = (taskInfo, type) => {
    this.setState({ taskView: true, taskInfo, type });
  };

（2）修改，写在table的this.columns

 {
        title: 'title1',
        align: 'center',
        key: 'title1',
        render: (text, record) => (
          <>
            <Popconfirm title="确定修改?" onConfirm={() => this.updateTask(record, 'update')}>
              <Button style={{ marginRight: 16 }} type="primary">
                编辑
              </Button>
            </Popconfirm>
          </>
        ),
      },

updateTask = (taskInfo, type) => {
    this.setState({ taskView: true, taskInfo, type });
  };

(2)Drawer.js子组件
步骤一：component写法

class Drawer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
render() {
    const { form, visible, onClose, taskInfo, type} = this.props;
    const { getFieldDecorator } = form;
    return (
      <Drawer
        title={`${title[type]}`}  //抽屉的标题，type主传
        width="50%"
        closable={false}
        keyboard={false}
        maskClosable={false}
        destroyOnClose
        visible={visible}  //控制显隐，主传
      >
        <Form style={{ padding: 10 }}>
        //isRead判断当前item是否展示
          {this.isRead(taskInfo) && (  
            <Form.Item label="任务单号">
              {getFieldDecorator('id', {
              //添加修改公用时默认值的写法
                initialValue: taskInfo?.id,
              })(<Input disabled />)}
            </Form.Item>
          )}
          <Form.Item label="label1">
            {getFieldDecorator('taskType', {
              initialValue: taskInfo?.taskType,
              rules: [
                {
                  required: true,
                  message: '请输入',
                },
              ],
            })(
              <Select
                style={{ width: 232 }}
              //判断当前select是否可选，例如添加可选修改不可
                disabled={this.isRead(taskInfo)}
                onChange={this.showHandler}
                placeholder="请选择"
              >
                <Option value="1">label1</Option>
                <Option value="2">label11</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="label2">
            {getFieldDecorator('taskName', {
              initialValue: taskInfo?.taskName,
              rules: [
                {
                  required: true,
                  message: '请输入',
                },
              ],
            })(<Input disabled={this.isRead(taskInfo)} placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="label3" >
            {getFieldDecorator('maxRetryCount', {
              initialValue: taskInfo?.maxRetryCount,
              rules: [
                {
                  required: true,
                  message: '请输入,最小为0',
                },
              ],
            })(
            //InputNumber的用法
              <InputNumber
                min={0}
                style={{ width: 232 }}
                placeholder="请输入,最小为0"
              />,
            )}
          </Form.Item>
          <Form.Item label="label4">
            {getFieldDecorator('retryIntervalTime', {
            //非必填时设置默认值
              initialValue: taskInfo?.retryIntervalTime || 60,
            })(
              <InputNumAddon
                min={0}
                style={{ width: 200 }}
                placeholder="请输入"
                //设置单位是秒
                addonAfter="s"
              />,
            )}
          </Form.Item>
        </Form>
  //自定义抽屉的foot
        <div className="drawerFoot">
          <Popconfirm title="确定保存?" onConfirm={e => this.handleSubmit(e)}>
            <Button style={{ marginRight: 16 }}>保存</Button>
          </Popconfirm>
          //此时onClose是从父组件中传过来的
          <Button type="primary" onClick={onClose}>
            关闭
          </Button>
        </div>
      </Drawer>
    );
  }
}

export default connect(({ taskConfigManager }) => ({
  taskConfigManager,
}))(Form.create()(TaskDrawer));

步骤二：涉及的方法
（1）isRead根据taskInfo是否存在判断当前是添加还是修改

isRead = taskInfo => {
    if (!taskInfo) {
      return false;
    }
    return true;
  };

（2）新增,修改提交

handleSubmit = e => {
    e.preventDefault();
    const {
      onClose,
      doQuery,
      dispatch,
      type,
      isSearch,
      form: { validateFields },
    } = this.props;
    validateFields((err, values) => {
      if (err) {
        message.warn('请检查页面错误信息', 1);
        return;
      }
      //接口及入参
      dispatch({
        type: 'taskConfigManager/operateTaskConf',
        payload: {
          ...values,
          eventCode: 'A',
          handler: values?.handler || 'B',
          action: type,  //根据type值判断是添加还是修改
        },
      }).then(rsp => {
        if (rsp.success) {
          message.success('操作成功', 1, () => {
            if (onClose && doQuery) {
              onClose();   //父传
              if (isSearch) {
                doQuery(); //父传
              }
            }
          });
        }
      });
    });
  };

(3)自定义title的类型，写在class上面

const title = {
  add: '新增任务配置',
  update: '修改任务配置',
};