小编Kev*_* H.的帖子

我已经阅读了一些相关文章，但没有成功解决我自己的让表单字段按要求显示的问题。也许问题出在外面，但我想分享一下，以防它突出一个独特的案例。

这是一个完整的课堂作业，可在此处查看，它允许用户将新列车添加到时间表并更新 Firebase 数据库。为此，我使用 Bootstrap 来设置样式，并使用一个模态弹出窗口，其中包含用于创建新列车的表单。一切正常，除了我无法将输入字段设为必填或阻止“提交”按钮。

我尝试将所有字段（在各自的 div 内）包装在一个元素中，并将它们分别包装在 a 中（如另一篇文章中所建议的），如下所示：

<div class="modal-body">
  <div class="panel panel-info">
    <div class="panel-body">
      <div class="form-group">
        <form>
          <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
        </form>
      </div>
    </div>
  </div>
<div class="modal-footer">
  <button class="btn btn-primary" id="submit" type="submit" value="submit">Submit</button>
</div>
</div>

我仔细检查了 Doctype 中的 HTML5 问题，但它检查出来了。我的结构很奇怪吗？

我缩小了范围以发现仅当我尝试<Moment />按React-Moment文档中所述传递组件时才会发生错误。到目前为止，我还没有找到有关此软件包的任何解释，希望那里的人也有类似的问题！

该文档阐明了这样的用法：

import Moment from 'react-moment';

// then within the class component:
return (
        const dateToFormat = '1976-04-19T12:59-0500';
        <Moment>{dateToFormat}</Moment>
        );

我想要一个像这样的原始日期字符串：

<Text>Created {this.props.postDate}</Text>

因此存储： "postDate": "2019-01-31T04:13:31.224Z"

但是到目前为止，无论何时添加<Moment>{this.props.postDate}</Moment>，无论是在现有<Text />块的外部还是内部，我都会变成红色：