Ant Design of React 之 Form 学习心得

Form使用

React中内容元素的显示，尽量避免通过CSS属性display控制，而应该通过如下方式：

//导出按钮的显示控制
//定义按钮变量
let exportButton = null;
if(labEnableFlag){
    exportButton = (
        <Button onClick={handleExport}>
            导出
        </Button>
    );
}

//render中使用
{exportButton}

Select下拉选-单选模式

const fieldStyle = { 
    width: '100%' 
};

<Select 
    allowClear  //支持清除
    placeholder="请选择" 
    style={fieldStyle}
>
    {positionList && positionList.map((item, key) => <Option value={item.id} key={key}>{item.name}</Option>)}
</Select>

Select下拉选-多选模式

const fieldStyle = { 
    width: '100%' 
};

<Select 
    mode="multiple" 
    placeholder="请选择" 
    optionFilterProp="children"
    style={fieldStyle}
>
    {positionList && positionList.map((item, key) => <Option value={item.id} key={key}>{item.name}</Option>)}
</Select>

文本输入框–支持手动清空

const clearIcon = {
    cursor: 'pointer',
    color: 'rgba(0, 0, 0, 0.45)'
};

//通用的清空方法
function emitEmpty(fieldName){
    resetFields([fieldName]);
}

const nameSuffix = getFieldValue('name') ? <Icon type="close-circle" style={clearIcon} onClick={e => emitEmpty('name')} /> : null;

const fieldStyle = { 
    width: '100%' 
};

<Input 
    placeholder="请输入" 
    suffix={nameSuffix} //添加清空图标
    style={fieldStyle}
/>