Fatal编程技术网
  • javascript/
  • Javascript 面对类型脚本问题var editIndex：任何绑定元素'；编辑索引'；隐式具有'；任何'；类型

Javascript 面对类型脚本问题var editIndex：任何绑定元素'；编辑索引'；隐式具有'；任何'；类型

javascript reactjs typescript

Javascript 面对类型脚本问题var editIndex：任何绑定元素'；编辑索引'；隐式具有'；任何'；类型,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,在这里，我显示了我的datepicker文件中的一些错误，这是react应用程序，我正在尝试使用typescript，但得到的错误很少 类型“ReactInstance”上不存在属性“contains”。 var editIndex:任何绑定元素“editIndex”都隐式具有“any”类型 findClosestSeparatorFieldIndex({ value, editIndex }) { const partialValue = value.substr(0, edi

在这里，我显示了我的datepicker文件中的一些错误，这是react应用程序，我正在尝试使用typescript，但得到的错误很少

类型“ReactInstance”上不存在属性“contains”。 var editIndex:任何绑定元素“editIndex”都隐式具有“any”类型

    findClosestSeparatorFieldIndex({ value, editIndex }) {
    const partialValue = value.substr(0, editIndex + 1);
    let numSeparators = partialValue.match(new RegExp(SEPARATOR, "g"));

    if (numSeparators) {
      // FIELD index from zero (['DD', 'MM', 'YYYY'])
      return numSeparators.length - 1;
    }

    import _ from "lodash";
import moment from "moment";
import React, { Component } from "react";
import "./DateField.scss";

const SEPARATOR = "-";
const POSSIBLE_SEPARATORS = ["-", "/", " ", String.fromCharCode(13)];
const FIELDS = [
  {
    label: "DD",
    pad: "0"
  },
  {
    label: "MM",
    pad: "0"
  },
  {
    label: "YYYY",
    pad: moment().year()
  }
];

const HINT = FIELDS.map((field) => field.label).join(SEPARATOR);
const MAX_LENGTH = HINT.length;

type OnChangePropType = {
  day: number;
  month: number;
  year: number;
  value: string;
  resolvedDate: string;
};

interface IProps {
  value: string;
  onChange: (param: OnChangePropType) => void;
}

interface IState {
  value: string;
  errors: Array<Object>;
  hint: string;
}

interface Dimensions { value: any, editIndex: any }

export class DateField extends Component<IProps, IState> {
  static defaultProps = {
    onChange: () => {}
  };


  constructor(props:IProps) {
    super(props);
    this.state = {
      value: props.value || "",
      hint: HINT,
      errors: []
    };
  }

  /**
   * Find difference between words (i.e. insertion or edit point)
   * @param {*} value
   * @param {*} lastValue
   */
  findDifference(value:any, lastValue:any) {
    for (let i = 0; i < value.length && i < lastValue.length; i++) {
      if (value[i] !== lastValue[i]) {
        return i;
      }
    }
    return value.length - 1;
  }

  findClosestSeparatorFieldIndex({ value, editIndex }) {
    const partialValue = value.substr(0, editIndex + 1);
    let numSeparators = partialValue.match(new RegExp(SEPARATOR, "g"));

    if (numSeparators) {
      // FIELD index from zero (['DD', 'MM', 'YYYY'])
      return numSeparators.length - 1;
    }
    return null;
  }

  componentDidUpdate(prevProp:IProps){
    const { value } = this.props;
    if(prevProp.value !==  value && value) {
      this.handleDate(value);
    }
  }

  handleDate(value: string) {
    const inputField = this.refs.input;
    // const caretStart = inputField.selectionStart;
    // const caretEnd = inputField.selectionEnd;

    // e.preventDefault();
    let { hint } = this.state;
    // let value = val;
    console.log("value", value);
    const errors = [];

    // swap all possible separators for correct one
    value = value.replace(
      new RegExp(`[${POSSIBLE_SEPARATORS.join("")}]`, "g"),
      SEPARATOR
    );

    // remove non-valid chars (not sep or digit)
    value = value.replace(new RegExp(`[^${SEPARATOR}0-9]`, ""), "");

    let editIndex = this.findDifference(value, this.state.value);
    let fieldToCompleteIndex = null;

    // find attempts at splitting
    if (value.charAt(editIndex) === SEPARATOR) {
      // const allSeparators = new RegExp(SEPARATOR, 'g').exec(value);
      // console.log('all', allSeparators);
      // const closestSeparator = _.find(allSeparators, (match, i) => {
      //   return editIndex < match.index ? i : false;
      // });

      fieldToCompleteIndex = this.findClosestSeparatorFieldIndex({
        value,
        editIndex
      });
      // console.log(fieldToCompleteIndex);
      // if (editIndex >
      // if (editIndex < 2) {
      //   completeComponent = 'day';
      // }
      // console.log(editIndex, 'YES');
    }

    // fix value by removing non-digits
    value = value.replace(/[^0-9]/g, "");
    const maxLength = HINT.replace(SEPARATOR, "").length;

    // size limit
    if (value.length > maxLength) {
      value = value.substr(0, maxLength);
    }

    // split into fields
    let day = value.substr(0, 2);
    let month = value.substr(2, 2);
    let year = value.substr(4, 4);

    // const resolvedDate = this.resolveDate({ day, month, year })
    // console.log(resolvedDate);

    if (fieldToCompleteIndex === 0) {
      day = this.completeField(day, fieldToCompleteIndex);
    }
    if (fieldToCompleteIndex === 1) {
      month = this.completeField(month, fieldToCompleteIndex);
    }
    if (fieldToCompleteIndex === 2) {
      year = this.completeField(year, fieldToCompleteIndex);
    }
    // editIndex++;

    let resolvedDate = null;
    if (day && month && year) {
      resolvedDate = moment([year, month - 1, day]);
      if (!resolvedDate.isValid()) {
        errors.push("Invalid");
        // console.log(resolvedDate);
      }
    }

    value =
      day +
      (month || fieldToCompleteIndex === 0 ? SEPARATOR + month : "") +
      (year || fieldToCompleteIndex === 1 ? SEPARATOR + year : "");

    // edit hint to remove replaced chars
    hint = HINT.substr(value.length);

    this.setState({ value, hint, errors });
    this.props.onChange({
      day: parseInt(day, 10),
      month: parseInt(month, 10) - 1,
      year: parseInt(year, 10),
      value,
      resolvedDate
    });
    console.log(
      "caretStart",
      caretStart,
      "caretEnd",
      caretEnd,
      "editIndex",
      editIndex
    );
  }

  change(e: React.ChangeEvent<HTMLInputElement>) {
   this.handleDate(e.target.value.toString());
    // requestAnimationFrame(() => {
    //   inputField.selectionStart = editIndex;
    //   inputField.selectionEnd = editIndex;
    // });
  }

  // resolveDate({ day, month, year }) {
  //   const today = moment();
  //   day  = parseInt(day) || 1;
  //   month = parseInt(month) || 0;
  //   year = parseInt(year) || today.year();

  //   let resolvedDate = moment([year, month, day]);
  //   console.log(resolvedDate);
  //   // if (parseInt(day) > ) {
  //   //   day = 1;
  //   // }
  //   if (!month || parseInt(month) === 0) {
  //     month = today.month();
  //   }

  //   return {
  //     day,
  //     month,
  //     year,
  //   };
  // }

  completeField(value, fieldIndex) {
    return _.padStart(
      value,
      FIELDS[fieldIndex].label.length,
      FIELDS[fieldIndex].pad
    );
  }

  render() {
    const { value, hint, errors } = this.state;
    return (
      <div>
        <div className="field">
          <div className="field-hint">
            <span className="hint-filled">{value}</span>
            {hint}
          </div>
          <input
            className="field-input"
            onChange={(e) => this.change(e)}
            value={value}
            ref="input"
          />
        </div>
        <div className="field-errors">
          {errors.map((error: React.ReactNode, i: number) => (
            <div className="field-errors-item" key={i}>
              {error}
            </div>
          ))}
        </div>
      </div>
    );
  }
}
显示错误
任何绑定元素“editIndex”都隐式具有“any”类型 返回null }

显示错误
月份：字符串 算术运算的左侧必须是“any”、“number”、“bigint”或枚举类型。ts（2362）

显示错误
（属性）resolvedDate:字符串 类型“力矩| null”不可分配给类型“字符串”。 类型“null”不可分配给类型“string”。ts（2322） DateField.tsx（31,3）：预期的类型来自属性'resolvedDate'，该属性在类型'OnChangePropType'上声明。

let resolvedDate = null;
    if (day && month && year) {
      resolvedDate = moment([year, month - 1, day]);
      if (!resolvedDate.isValid()) {
        errors.push("Invalid");
        // console.log(resolvedDate);
      }
    }
显示错误
月份：字符串 算术运算的左侧必须是“any”、“number”、“bigint”或枚举类型。

这里我展示了我的文件代码 代码

    findClosestSeparatorFieldIndex({ value, editIndex }) {
    const partialValue = value.substr(0, editIndex + 1);
    let numSeparators = partialValue.match(new RegExp(SEPARATOR, "g"));

    if (numSeparators) {
      // FIELD index from zero (['DD', 'MM', 'YYYY'])
      return numSeparators.length - 1;
    }

    import _ from "lodash";
import moment from "moment";
import React, { Component } from "react";
import "./DateField.scss";

const SEPARATOR = "-";
const POSSIBLE_SEPARATORS = ["-", "/", " ", String.fromCharCode(13)];
const FIELDS = [
  {
    label: "DD",
    pad: "0"
  },
  {
    label: "MM",
    pad: "0"
  },
  {
    label: "YYYY",
    pad: moment().year()
  }
];

const HINT = FIELDS.map((field) => field.label).join(SEPARATOR);
const MAX_LENGTH = HINT.length;

type OnChangePropType = {
  day: number;
  month: number;
  year: number;
  value: string;
  resolvedDate: string;
};

interface IProps {
  value: string;
  onChange: (param: OnChangePropType) => void;
}

interface IState {
  value: string;
  errors: Array<Object>;
  hint: string;
}

interface Dimensions { value: any, editIndex: any }

export class DateField extends Component<IProps, IState> {
  static defaultProps = {
    onChange: () => {}
  };


  constructor(props:IProps) {
    super(props);
    this.state = {
      value: props.value || "",
      hint: HINT,
      errors: []
    };
  }

  /**
   * Find difference between words (i.e. insertion or edit point)
   * @param {*} value
   * @param {*} lastValue
   */
  findDifference(value:any, lastValue:any) {
    for (let i = 0; i < value.length && i < lastValue.length; i++) {
      if (value[i] !== lastValue[i]) {
        return i;
      }
    }
    return value.length - 1;
  }

  findClosestSeparatorFieldIndex({ value, editIndex }) {
    const partialValue = value.substr(0, editIndex + 1);
    let numSeparators = partialValue.match(new RegExp(SEPARATOR, "g"));

    if (numSeparators) {
      // FIELD index from zero (['DD', 'MM', 'YYYY'])
      return numSeparators.length - 1;
    }
    return null;
  }

  componentDidUpdate(prevProp:IProps){
    const { value } = this.props;
    if(prevProp.value !==  value && value) {
      this.handleDate(value);
    }
  }

  handleDate(value: string) {
    const inputField = this.refs.input;
    // const caretStart = inputField.selectionStart;
    // const caretEnd = inputField.selectionEnd;

    // e.preventDefault();
    let { hint } = this.state;
    // let value = val;
    console.log("value", value);
    const errors = [];

    // swap all possible separators for correct one
    value = value.replace(
      new RegExp(`[${POSSIBLE_SEPARATORS.join("")}]`, "g"),
      SEPARATOR
    );

    // remove non-valid chars (not sep or digit)
    value = value.replace(new RegExp(`[^${SEPARATOR}0-9]`, ""), "");

    let editIndex = this.findDifference(value, this.state.value);
    let fieldToCompleteIndex = null;

    // find attempts at splitting
    if (value.charAt(editIndex) === SEPARATOR) {
      // const allSeparators = new RegExp(SEPARATOR, 'g').exec(value);
      // console.log('all', allSeparators);
      // const closestSeparator = _.find(allSeparators, (match, i) => {
      //   return editIndex < match.index ? i : false;
      // });

      fieldToCompleteIndex = this.findClosestSeparatorFieldIndex({
        value,
        editIndex
      });
      // console.log(fieldToCompleteIndex);
      // if (editIndex >
      // if (editIndex < 2) {
      //   completeComponent = 'day';
      // }
      // console.log(editIndex, 'YES');
    }

    // fix value by removing non-digits
    value = value.replace(/[^0-9]/g, "");
    const maxLength = HINT.replace(SEPARATOR, "").length;

    // size limit
    if (value.length > maxLength) {
      value = value.substr(0, maxLength);
    }

    // split into fields
    let day = value.substr(0, 2);
    let month = value.substr(2, 2);
    let year = value.substr(4, 4);

    // const resolvedDate = this.resolveDate({ day, month, year })
    // console.log(resolvedDate);

    if (fieldToCompleteIndex === 0) {
      day = this.completeField(day, fieldToCompleteIndex);
    }
    if (fieldToCompleteIndex === 1) {
      month = this.completeField(month, fieldToCompleteIndex);
    }
    if (fieldToCompleteIndex === 2) {
      year = this.completeField(year, fieldToCompleteIndex);
    }
    // editIndex++;

    let resolvedDate = null;
    if (day && month && year) {
      resolvedDate = moment([year, month - 1, day]);
      if (!resolvedDate.isValid()) {
        errors.push("Invalid");
        // console.log(resolvedDate);
      }
    }

    value =
      day +
      (month || fieldToCompleteIndex === 0 ? SEPARATOR + month : "") +
      (year || fieldToCompleteIndex === 1 ? SEPARATOR + year : "");

    // edit hint to remove replaced chars
    hint = HINT.substr(value.length);

    this.setState({ value, hint, errors });
    this.props.onChange({
      day: parseInt(day, 10),
      month: parseInt(month, 10) - 1,
      year: parseInt(year, 10),
      value,
      resolvedDate
    });
    console.log(
      "caretStart",
      caretStart,
      "caretEnd",
      caretEnd,
      "editIndex",
      editIndex
    );
  }

  change(e: React.ChangeEvent<HTMLInputElement>) {
   this.handleDate(e.target.value.toString());
    // requestAnimationFrame(() => {
    //   inputField.selectionStart = editIndex;
    //   inputField.selectionEnd = editIndex;
    // });
  }

  // resolveDate({ day, month, year }) {
  //   const today = moment();
  //   day  = parseInt(day) || 1;
  //   month = parseInt(month) || 0;
  //   year = parseInt(year) || today.year();

  //   let resolvedDate = moment([year, month, day]);
  //   console.log(resolvedDate);
  //   // if (parseInt(day) > ) {
  //   //   day = 1;
  //   // }
  //   if (!month || parseInt(month) === 0) {
  //     month = today.month();
  //   }

  //   return {
  //     day,
  //     month,
  //     year,
  //   };
  // }

  completeField(value, fieldIndex) {
    return _.padStart(
      value,
      FIELDS[fieldIndex].label.length,
      FIELDS[fieldIndex].pad
    );
  }

  render() {
    const { value, hint, errors } = this.state;
    return (
      <div>
        <div className="field">
          <div className="field-hint">
            <span className="hint-filled">{value}</span>
            {hint}
          </div>
          <input
            className="field-input"
            onChange={(e) => this.change(e)}
            value={value}
            ref="input"
          />
        </div>
        <div className="field-errors">
          {errors.map((error: React.ReactNode, i: number) => (
            <div className="field-errors-item" key={i}>
              {error}
            </div>
          ))}
        </div>
      </div>
    );
  }
}
从“lodash”导入； 从“时刻”中导入时刻； 从“React”导入React，{Component}； 导入“/DateField.scss”； 常量分隔符=“-”； 常量可能的_分隔符=[“-”，“/”，“”，String.fromCharCode（13）]； 常量字段=[ { 标签：“DD”， 键盘：“0” }, { 标签：“MM”， 键盘：“0” }, { 标签：“yyy”， pad:moment（）.year（） } ]; const HINT=FIELDS.map（（field）=>field.label）.join（分隔符）； const MAX_LENGTH=HINT.LENGTH； 类型OnChangePropType={ 日期：数字； 月份：数字； 年份：数字； 值：字符串； resolvedDate:字符串； }; 接口IProps{ 值：字符串； onChange：（参数：OnChangePropType）=>void； } 界面状态{ 值：字符串； 错误：数组； 提示：字符串； } 接口维度{value:any，editIndex:any} 导出类DateField扩展组件{ 静态defaultProps={ onChange:（）=>{} }; 建造师（道具：IProps）{ 超级（道具）； 此.state={ 值：props.value | |“”， 提示：提示， 错误：[] }; } /** *查找单词之间的差异（即插入点或编辑点） *@param{*}值 *@param{*}lastValue */ findDifference（值：any，lastValue:any）{ for（设i=0；i{ //返回editIndex //如果（编辑索引<2）{ //completeComponent='天'； // } //log（editIndex，“YES”）； } //通过删除非数字来固定值 值=值。替换（/[^0-9]/g，”）； const maxLength=HINT.replace（分隔符“”）.length； //尺寸限制 如果（value.length>maxLength）{ value=value.substr（0，maxLength）； } //分成几块地 let day=value.substr（0,2）； 设月=value.substr（2,2）； 让年份=值substr（4,4）； //const resolvedDate=this.resolveDate（{day，month，year}） //console.log（resolvedDate）； 如果（fieldToCompleteIndex==0）{ day=此.completeField（day，fieldToCompleteIndex）； } 如果（fieldToCompleteIndex==1）{ 月=此.completeField（月，fieldToCompleteIndex）； } 如果（fieldToCompleteIndex==2）{ 年份=此.completeField（年份，fieldToCompleteIndex）； } //editIndex++； 让resolvedDate=null； 如果（日、月、年）{ resolvedDate=时刻（[年，月-1，日]）； 如果（！resolvedDate.isValid（））{ 错误。推送（“无效”）； //console.log（resolvedDate）； } } 价值观= 一天+ （月份| | fieldToCompleteIndex==0？分隔符+月份：“”）+ （年份| | fieldToCompleteIndex==1？分隔符+年份：“”）； //编辑提示以删除替换的字符 hint=hint.substr（value.length）； this.setState（{value，hint，errors}）； 这个。道具。改变({ 日期：parseInt（第10天）， 月份：parseInt（第10个月）-1， 年份：parseInt（第10年）， 价值 分解物 }); console.log( “插入符号