1

如果您没有完整的回复，我将很乐意接受指导/指针/想法。

我目前正在更新使用 React 和 Blueprint JS 元素构建的电子邮件系统。

在电子邮件对话框中，我尝试使用 BlueprintJS/labs 的 TagInput 将To和CC字段从文本输入移动到 TagInput 系统。

http://blueprintjs.com/docs/v1/#labs/tag-input

您将在上面链接中包含的示例中看到，他们的 TagInput 字段将允许您将新标签添加到输入字段。一旦这些标签的长度超过输入字段的宽度，它将在输入字段中添加一个新行并允许您继续添加标签。

据我所知，输入字段通常不允许多行。

如何做到这一点？在我目前的代码中，一旦标签超过输入字段的宽度，它将继续在输入下方的新行上添加新标签，但是，它不会增加输入字段的高度来补偿。（使标签看起来神奇地漂浮在输入之外，悬停在其他内容上并阻碍其他内容。）

下图显示了效果。（CC 字段是 TagInput - 如您所见，第一行下方的标签只是“悬停在空间中”并覆盖主题字段，并最终向下移动以覆盖电子邮件正文。）

在此处输入图像描述

TagInput 的定义很简单。

<TagInput
    className='pt-fill pt-input-ghost'
    onChange={(cc: string[]) => this.setState({cc})}
    values={this.state.cc}
    inputValue={this.state.cc_input}
    placeholder='CC:'
    leftIconName='document-share'
/>

另外，我有一点修改的 CSS

.pt-input{
    overflow-wrap: break-word;
}

.pt-tag-input{
    padding-bottom: 2px;
}

.pt-tag {
    margin-bottom: 2px;
    margin-left: 2px;
}

.pt-tag-input-icon{
    margin-right: 2px;
}

.pt-input-ghost{
    border:none;
    outline-style:none;
    outline:none;
    box-shadow:none;
    border-color:transparent;
    margin: 2px 0px;
    background-color:transparent;
}

.pt-input-ghost:focus{
    border:none;
    outline-style:none;
    outline:none;
    box-shadow:none;
    border-color:transparent;
    background-color:transparent;
    width: auto;
}

感谢所有的帮助:)

同样，如果您没有完整的回复，我将很乐意接受指导/指针/想法。

4

1 回答 1

0

关于 TagInput 实现的几点说明：它实际上不是一个<input>元素，只是样式看起来像一个！该组件实际上是一个充满标签的 div，<input>最后带有一个供您输入的标签。

组件的默认样式允许其高度增长以适应内容，内容可能会换行。

您的屏幕截图表明您的应用程序有一些样式（上面未引用），这些样式阻止了TagInput应有的增长，因此标签溢出并覆盖了下面的内容。

于 2018-03-21T00:14:48.233 回答