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

Question

使用 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>

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

Answer 1

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

https://momentjs.com/

所以你的 releaseDate 会像

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

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

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

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

ReactJS form field with value not updating, and logging as a Date field

javascript

reactjs

reactstrap