ReactJS 表单字段的值未更新，并记录为日期字段答案

【问题标题】：ReactJS form field with value not updating, and logging as a Date fieldReactJS 表单字段的值未更新，并记录为日期字段
【发布时间】：2018-11-01 14:10:21
【问题描述】：

使用 Reactstrap 来简化样式，我正在使用他们的 <Input> 组件，并且我已经构建了表单，但它不允许文本输入。输入字段时控制台抛出此错误：

我已经设置了组件，并且表单的其余部分工作正常：

constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      preferredName: "",
      middleName: "",
      lastName: "",
      address1: "",
      address2: "",
      city: "",
      state: "",
      zip: "",
      maxContacts: 5,
      currentContacts: 0,
      releaseDate: Date.now(),
      gender: "M",
      institutionId: "",
      country: "US",
      areaCode: 1,
      language: "EN",
      contacts: []
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    let prependStyle = {
      fontSize: "2pt",
      fontFamily: "monospace"
    };

在渲染中，我设置了一些基本样式供以后在组件中使用。下面是 JSX 在组件中表现得很有趣的部分：

  <InputGroup>
    <InputGroupAddon addonType="prepend" style={prependStyle}>
      Institution ID
    </InputGroupAddon>
    <Input
      type="text"
      value={this.state.institutionId}
      name="instituitonId"
      onChange={this.onChange}
    />
  </InputGroup>

为什么会这样？（编辑以获取更多信息没有问题。）这是表单中唯一不更新呈现页面上的输入的字段，虽然有一个日期字段，但它被正确地封闭在该元素之外。

【问题讨论】：

标签： javascript reactjs reactstrap

【解决方案1】：

考虑使用 moment.js 将您的时间转换为组件需要的有效时间格式

https://momentjs.com/

所以你的releaseDate 会是这样的

formattedReleaseDate = moment(this.state.releaseDate, 'YYYY-MM-DD');

你想把它放在你的渲染函数中。

https://momentjs.com/docs/#/query/is-dst-shifted/

【讨论】：

虽然这是一个很好的建议，但我不得不提一下，有问题的字段是并且应该只是文本。有问题的字段正在抛出时间格式警告。
所以整个时间以毫秒为单位。 Date.now() 在 javascript 文档中定义为返回值：它返回自 1970 年 1 月 1 日 00:00:00 UTC 以来经过的毫秒数
我不确定您是否需要将所有状态值传递给您的组件。
哦等等！是的。我现在明白了。好吧...您可以传入类似 onTextInput 之类的事件处理程序的内容，并分派您已对其执行操作的事件。这可能是一个很好的例子。 stackoverflow.com/questions/42550341/…
哦，我有一个名称字段没有正确映射到状态。那是另一个问题，问题中提到的一个字段在onChange 事件中没有更新