SharePoint React SPFX 问题与休息调用日期选择器（MS Fluent UI）插入到 SPO 列表

Question

我一直在尝试使用 REST API 插入日期字段值以及一些其他数据，这些数据将插入到 SPO 列表的多个列中。通过删除日期值，数据将被适当地插入，没有任何麻烦。但是对于日期值，查询无法将记录插入到 SPO 列表中。请帮帮我！

谢谢

Answer 1

你可以使用 pnp js。

我的测试代码：

ReactFluent.tsx

import * as React from 'react';
import styles from './ReactFluent.module.scss';
import { IReactFluentProps } from './IReactFluentProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Web, List, ItemAddResult } from 'sp-pnp-js';
import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
const DayPickerStrings: IDatePickerStrings = {
  months: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],

  shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

  shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],

  goToToday: 'Go to today',
  prevMonthAriaLabel: 'Go to previous month',
  nextMonthAriaLabel: 'Go to next month',
  prevYearAriaLabel: 'Go to previous year',
  nextYearAriaLabel: 'Go to next year',
  closeButtonAriaLabel: 'Close date picker',

  isRequiredErrorMessage: 'Start date is required.',

  invalidInputErrorMessage: 'Invalid date format.',
};
const controlClass = mergeStyleSets({
  control: {
    margin: '0 0 15px 0',
    maxWidth: '300px',
  },
});

const firstDayOfWeek = DayOfWeek.Sunday;
const desc = 'This field is required. One of the support input formats is year dash month dash day.';
export default class ReactFluent extends React.Component<IReactFluentProps,any> {
  constructor(props:IReactFluentProps,any) {
    super(props);
    this.state = {
      datePickerValue:String
    };
  }
  public render(): React.ReactElement<IReactFluentProps> {
    const onSelectDate = (date: Date | null | undefined): void => {
      //console.log(date)
      this.setState({
        datePickerValue:date
      });
    };
    const onClick = (): void => {
      var date= this.state.datePickerValue;
      this._addItem(date);
    };
    return (
      <div className={ styles.reactFluent }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
        <DatePicker
          className={controlClass.control}
          label="Start date"
          isRequired={false}
          allowTextInput={true}
          ariaLabel={desc}
          firstDayOfWeek={firstDayOfWeek}
          strings={DayPickerStrings}

          onSelectDate={onSelectDate}
        />
         <DefaultButton onClick={onClick} text="add" />
      </div>

    );
  }

  private _addItem(date):void
  {    
    console.log(date);
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);  

      web.lists.getByTitle('test3').items.add({
        Title:'testTitle',
        date:date
      }).then((response)=>{console.log(response);});
  }
}

IReactFluentProps.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IReactFluentProps {
  description: string;
  context:WebPartContext;//you need to update the props at React.createElement
}

测试结果：