定向表单 AdTargetingForm
定向表单是用来快速搭建广告投放系统定向表单的 UI SDK，目前支持 radio (单选)、checkbox (多选)、range (范围选择)、category_and_keyword (树状选择，包括 behavior_or_interest - 行为兴趣、wechat_official_account_category - 微信公众号、mobile_union_category - 移动媒体类型）、geo_location (地域定向)、自定义人群 (custom_audiences) 等类型的定向配置。
使用说明
import { AdTargeting } from '@tencent/mktui';
const { AdTargetingForm } = AdTargeting;
<AdTargetingForm {...this.props} />组件示例
属性说明
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
data | 定向数据 | object | {} |
onChange | 数据改变的回调 | func | funtion(){} |
config | 定向配置 | object | {} |
config.targeting_fields | 各个定向项配置集 | object | {} |
config.display_fields | 需要展示的定向项 | array | [] |
checkedFields | 选中的定向列表 | array | [] |
onCheckedChange | 选中或取消选中定向的回调 | func | funtion(){} |
errorTips | 错误信息 | object | {} |
showError | 是否显示错误信息 | bool | false |
disabled | 是否允许编辑 | bool | false |
title | 标题 | string | '定向' |
HeaderComponent | 头部位置组件 | func|element | null |
fieldComponentMap | 自定义定向项type对应的React组件 | object | {} |
fieldsData | 特殊定向项的配置 | object | {} |
案例
// fieldName:定向项名称， data: 定向项数据
onChange(fieldName, data)
// targeting_fields 为包含各定向项配置的对象，display_fields 为包含需要展示的定向项的数组
config = { targeting_fields: { education : {}, gender: {} }, display_fields: ['education', 'gender'] }
// fieldName: 字段名称
onCheckedChange(fieldName)
// 对于type为range类型的定向项，渲染RangeComponent组件
fieldComponentMap = { 'range': RangeComponent }
// 特殊定向项的配置，例如“行为兴趣”定向需要传入特殊配置。具体用法可参考案例代码
fieldsData={
behavior_or_interest: { // 行为兴趣定向特殊配置
searchDataPanelOpen: {interest: true, behavior: false}, // 搜索框是否展开
searchData: {interest: [], behavior: []}, // 搜索列表数据
recommendData: {interest: [], behavior: []}, // 推荐词列表数据
onSearch: ()=>{}, // 搜索回调
onRecommend: ()=>{}, // 点击推荐词回调
onSearchDataPanelOpenChange: ()=>{} // 搜索框展开/收起回调
}
}
// range 类型的定向配置，可通过 options 设置选择框数据增长间隔
// 可参考案例的配置：https://i.gtimg.cn/qzone/biz/gdt/lib/mktui/1.1/config/mktui_adtargeting_config.js
{
'min': 14.0,
'max': 67.0,
'endless': 'true', // 最后一项展示 label 为 "[max -1]及以上"，见 age 定向
'label_offset': -273 // 每项展示 label 为 value + label_offset, 见 temperature (用于将华氏度展示为摄氏度) 定向
}
// 自定义下拉数据枚举，并指定 max 的最后一个数值展示的 label，见 gamer_consumption_ability 定向
{
'min': [1, 10, 20, 30, 40, 50],
'max': [10, 20, 30, 40, 50, 999999999],
'endless': 'true',
'endLabel': '50 元及以上' // endless 为 true 时有效
}
