快速构建定向UI

本章节介绍了 Marketing UI 中定向模块的安装、使用方法及步骤。

支持的定向元素类型

单选 (radio)、多选 (checkox) 、数值范围 (range)、行为兴趣 (interest_or_behavior)、地域定向 (geo_location)

使用步骤

step 1. 加载 Marketing UI 组件包

参考 如何安装组件包 。

step 2. 加载组件

import React, { Component } from 'react';
import { render } from 'react-dom';

import { AdTargeting } from '@tencent/mktui';
const { AdTargetingForm, AdTargetingUtils } = AdTargeting;
const { validator } = AdTargetingUtils;
const { validateField, validateTargeting } = validator;

step 3. 初始化定向表单

在Demo代码中初始化定向表单，并传入必填的属性，包括 config, data, onChange, onSwitch 等等。 定向组件需要传入的定向配置 props.config 目前还没有对应的 Marketing API 接口可以拉取。 根据 Marketing API 创建定向的 targetings/add 接口文档，我们制定了一份定向配置数据，可以将其保存为 mktui_adtargeting_config.js，点此获取 。具体显示哪些定向，可通过配置中的 display_fields 字段指定。

自定义定向组件

目前我们支持的定向项类型 (type) 包含 checkbox 和 radio，对于其他不支持的类型，用户可通过传入 fieldComponentMap 属性来自定义，如以下demo所示。自定义的组件可通过props获取对应项的定向配置数据。

// config引用自step 4 中获取的配置文件
import { config } from './mktui_adtargeting_config.js';
const targetingFieldconfig = config.targeting_fields

// 自定义Component
const CustomPlaceHolderComponent = (props = {}) => {
    const { description, status, data, type, name, tips } = props
    return (
        <div className=custom_placeholder>
            <ul>
                <p><strong>CustomPlaceHolderComponent</strong></p>
                <li>description: {description}</li>
                <li>type: {type}</li>
                <li>name: {name}</li>
                <li>tips: {JSON.stringify(tips)}</li>
                <li>data: {JSON.stringify(data)}</li>
                <li>status: {JSON.stringify(status)}</li>
                <li>all properties: {JSON.stringify(Object.keys(props))}</li>
            </ul>
        </div>
    )
}

// 自定义custom_type类型的定向项渲染CustomPlaceHolderComponent组件
const customFieldComponentMap = {
    'custom_type': CustomPlaceHolderComponent
}

class Example extends Component {
    constructor(props) {
        super(props);

        this.state = {
            checkedFields: [],
            data: {},
            errorTips: {},
            showError: false
        }

        this.handleChange = this.handleChange.bind(this)
        this.handleCheckedChange = this.handleCheckedChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)

    }

    handleChange(fieldName, data) {
        const error = validateField(data, targetingFieldconfig[fieldName])
        const newData = Object.assign({}, this.state.data)
        const newErrorTips = Object.assign({}, this.state.errorTips)
        newData[fieldName] = data

        if (error) {
            newErrorTips[fieldName] = error
        } else {
            delete newErrorTips[fieldName]
        }

        this.setState({
            data: newData,
            errorTips: newErrorTips
        })
    }

    handleCheckedChange(fieldName) {
        const { checkedFields: oldCheckedFields } = this.state
        const checkedFields = Object.assign([], oldCheckedFields)
        const index = checkedFields.indexOf(fieldName)
        if (index > -1) {
            checkedFields.splice(index, 1)
        } else {
            checkedFields.push(fieldName)
        }

        this.setState({
            checkedFields
        })
    }

    handleSubmit() {
        const { data, checkedFields } = this.state
        const errorTips = validateTargeting(data, targetingFieldconfig, checkedFields)

        // 示例展示用
        console.log('表单数据：')
        console.log(data)

        this.setState({
            errorTips,
            showError: true
        })
    }

    render() {
        const { data, checkedFields, errorTips, showError } = this.state
        return (
            <div className=tsaui style={{ margin: '60px' }}>
                <AdTargetingForm
                    data={data}
                    checkedFields={checkedFields}
                    errorTips={errorTips}
                    showError={showError}
                    config={config}
                    onChange={this.handleChange}
                    onCheckedChange={this.handleCheckedChange}
                    fieldComponentMap={customFieldComponentMap}
                />
                <button type=button className=btn btn-primary onClick={this.handleSubmit} style={{ 'marginTop': '30px' }}>提交(console中查看)</button>
            </div>
        );
    }
}

render(<Example/>, document.getElementById('test'));