amis 配置面板自定义组件的onChange事件

u91tlkcl 于 4个月前发布在其他

关注(0)|答案(5)|浏览(57)

实现场景：

如上图所示我们自己注册了表单组件，期望“数据源选择”修改后，能给下方的搜索字段选择赋值

翻了一下amis的源代码，发现了onChange事件能够满足yao要求

但是我们尝试了一下，事件不能触发，请问这个方法使用有别的代码需要配置吗

ae-datasource是自定义的表单项类型组件，用@FormItem注册的

setSchemaTpl('dataSource', (patch: any = {}) => {
  console.log('patch', patch)

  return {
    type: 'ae-datasource',
    // label: '数据源选择',
    // name: name || 'api',
    ...patch,
  };
});

 getSchemaTpl('dataSource', {
      id: context.schema.id,
      name: 'dataSource',
      showRequired: false,
      updateSchema: context.node.updateSchema,
      schema: context.node.schema,
      useType: 'table',
      // eslint-disable-next-line max-params
      onChange: (
        value: string,
        oldValue: any,
        model: any,
        form: any
      ) => {
       // 没有任何日志打印
        console.log('0000000', value, oldValue,model, form)
      }
}),

amis

来源：https://github.com/baidu/amis/issues/8873

5条答案

按热度按时间

b1payxdu1#

@zhaoyinger623 事件不能触发，是指 onChange 没有正常执行吗？

赞(0）回复(0）举报 4个月前

jrcvhitl2#

@zhaoyinger623 最好能贴一下 ae-datasource 的完整代码。

赞(0）回复(0）举报 4个月前

gt0wga4j3#

是的，onChange没有执行，是不是updateSchema和onChange冲突了

// 给编辑、新增、详情表单、数据表提供数据源选择

import { Select } from 'amis';
import { Checkbox, Col, Row } from 'antd';
import type { FC } from 'react';
import { useEffect, useState } from 'react';
import styles from './style.module.scss';

interface DataSourceProps {
  id: string;
  value: string;
  onChange: (value: string) => void;
  updateSchema: (schema: any) => VideoColorSpace;
  schema: any;
}

const DataSource: FC<DataSourceProps> = (props) => {
  const { value, onChange, updateSchema, schema } = props;
  const [entityId, setEntityId] = useState<number>();
  const [fieldIds, setFieldIds] = useState<number[]>([]);

  useEffect(() => {
    const res = value ? JSON.parse(value) : {};
    setEntityId(res?.entityId || undefined);
    setFieldIds(res?.fieldIds || []);
  }, [value]);

  const handleEntityChange = (info) => {
    if (!info) {
      const dataSource = {};
      onChange(JSON.stringify(dataSource));
      handleUpdateSchema(dataSource);
      return;
    }
    const { id } = info;
    const dataSource = { entityId: id, fieldIds: [] };
    onChange(JSON.stringify(dataSource));
    handleUpdateSchema(dataSource);
  };

  const handleFieldChange = (ids) => {
    const res = JSON.parse(value);
    const dataSource = { ...res, fieldIds: ids };
    onChange(JSON.stringify(dataSource));
    handleUpdateSchema(dataSource);
  };

  const handleUpdateSchema = (dataSource) => {
    // 这个函数内部做了一些其他操作，目的是为了修改schema
    updateSchema({
      ...schema,
      dataSource: JSON.stringify(dataSource),
    });
  };

  return (
    <div>
      <Select
        value={entityId}
        options={options}
        placeholder="请选择数据源"
        onChange={handleEntityChange}
        className={styles.select}
      />
      <Checkbox.Group value={fieldIds} onChange={handleFieldChange}>
        <Row>
          {checkOptions.map((option) => (
            <Col span={24} key={option.id} className={styles.checkboxCol}>
              <Checkbox value={option.id}>
                {option.name}
              </Checkbox>
            </Col>
          ))}
        </Row>
      </Checkbox.Group>
    </div>
  );
};

export default DataSource;

赞(0）回复(0）举报 4个月前

wqsoz72f4#

@zhaoyinger623 看代码没看出什么原因来，方便的话，发一下完整代码的zip包或者demo 仓库地址，我们定位下。

赞(0）回复(0）举报 4个月前

fsi0uk1n5#

我这边定位到的问题就是updateSchema和onChange同时使用的问题，我把updateSchema注释掉就可以触发了

赞(0）回复(0）举报 4个月前