react-bootstrap-table2 自定义验证器错误消息出现在 UI

Question

我根据this example写了一个cell validator（以下是原代码的精简版）：

{
    text: 'IPv4', 
    dataField: 'IPv4',
    validator: (newValue, row, column) => {
        if (!isValidIP(newValue)) {
            return {
                valid: false,
                message: 'Must be a valid IP address'
            };
        }
        return true;
    }
};

逻辑运行良好，但由于某种原因错误消息被删减：

更新：

我检查了 html，发现当验证方法 returns 时，以下组件被添加到 html 文件中：

<div class="alert alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

当我从 class 中删除 'alert' 属性时，消息正确显示：

<div class="alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

知道为什么会发生这种情况吗以及如何以编程方式删除警报？

Answer 1

好的，由于以下 css 配置，原来是 css 问题：

.alert {
  left: -50%;
  z-index: 100;
}

我删除它后，错误消息和单元格文本对齐。

react-bootstrap-table2 自定义验证器错误消息出现在 UI

react-bootstrap-table2 custom validator error message appears trimmed in the UI

javascript

css

reactjs

react-bootstrap-table