如何以JSON形式添加日期值？ [附摘要]

如何解决如何以JSON形式添加日期值？ [附摘要]

我正在制作一个具有由基本详细信息和就业详细信息部分组成的表单的React应用。

表单几乎完成了，而且我能够为不同的部分形成JSON结构。

在此处完成工作示例：https://codesandbox.io/s/nextjs-css-only-carousel-forked-v7gg0

在“就业详细信息”部分，我需要将开始日期和结束日期作为输入字段。

因此，我制作了一个自定义的月份和年份选择器，并将与 monthpicker.js 相同的内容包含在内。

在“就业详细信息”部分，我已使用代码调用了该组件，

  const [month,setMonth] = useState(
    `${`0${new Date().getMonth() + 1}`.slice(-2)}/${new Date().getFullYear()}`
  );

使用以下代码，更新所选值，

{
  "basicDetails": {
    "firstName": "...","lastName": "..."
  },"companyDetails": [
    {
      "companyName": "...","designation": "...","startDate": "06/2016"
    }
  ]
}

但是我能理解这是需要更改的地方，但是我不确定要处理它。

File where the monthpicker component included。

要求：因此，如果用户从选择器中选择月份和年份，则该特定值需要在JSON结构中进行更新，而这种情况现在不会发生。

例如：

如果用户选择月份为Jun，年份为2016，则JSON格式将为

import React from 'react';
import { StyleSheet } from 'react-native';
import Video,{ LoadError } from 'react-native-video';

import Logger from 'library/logger';

// import { toggleSpinner } from 'Redux/common/common.actions';
import { store } from 'store';

const VideoPlayer = ({ source,...otherProps }: IProps) => {
  const handleError = (error: LoadError) => {
    Logger.log('VIDEO_LOADING_ERROR','Error occured while loading the video',error);
  };

  const onLoadStart = () => {
    // store.dispatch(toggleSpinner(true));
  };

  const onLoadEnd = () => {
    // store.dispatch(toggleSpinner(false));
  };

  return (
    <Video
      source={{ uri: source }}
      controls={true}
      repeat={otherProps.repeat}
      onLoadStart={onLoadStart}
      onReadyForDisplay={onLoadEnd}
      resizeMode={otherProps.videoResizeMode}
      onError={(error: LoadError) => handleError(error)}
      style={styles.videoPlayer}
    />
  );
};

const styles = StyleSheet.create({
  videoPlayer: {
    top: 0,left: 0,bottom: 0,right: 0,height: 300,},});

interface IProps {
  controls: boolean;
  source: string;
  repeat: false;
  videoResizeMode: 'stretch' | 'contain' | 'cover' | 'none' | undefined;
}

VideoPlayer.defaultProps = {
  videoResizeMode: 'stretch',repeat: true,controls: true,};

export default VideoPlayer;

由于可以添加其他行，因此需要将所选值添加到相应的输入中。

真的卡了很长时间，需要一些帮助。

解决方法

@未定义，我将在答案here中使用相同的代码，并将在本文中添加您要实现的功能。

---

MonthPicker组件值的更改未反映到formValue的原因是因为您将setMonth作为onChange而不是{{1} } —基本上，更改仅存储在handleInputChange状态下。

理想情况下，我们应该能够像下面一样使用month，其中我们接受了MonthPicker道具中的event，可用来提取onChange和{ {1}}个属性。

target.name

我修复并重构了您的MonthPicker组件，以便每次target.value更改（如增加/减少年份和选择月份）时，我们都将调用<MonthPicker label="Start Date" name="startDate" onChange={(event) => handleInputChange(index,event)} /> 道具并通过其新的{ {1}}。

请查看下面的演示，如果您有任何疑问，请告诉我。

,

您正在更改时调用setMonth，但未传递值：

onChange={(e) => setMonth(e.target.value)}