时间戳

首页 > 解决方案 > ReactJS 表单字段的值未更新，并记录为日期字段

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

问题描述

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

React-Dom 错误

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

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>

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

标签： javascriptreactjsreactstrap

解决方案

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

https://momentjs.com/

所以你releaseDate会像

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

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

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

推荐阅读