Кнопка «Удалить» не удаляет «/» после использования реагирующей текстовой маски - PullRequest
0 голосов
/ 04 декабря 2018

У меня есть TextField, который включает в себя поле response-text-mask для поля даты в моем коде, но я не могу понять, что мне нужно изменить, что позволит пользователям удалять «/» при необходимости.Прямо сейчас они могут удалить текущий раздел, в котором находится их курсор, и использовать клавиши со стрелками вправо или влево, чтобы перейти к другому разделу этой даты, но кнопка удаления не позволит перейти за "/".

Вот код TextField:

  <Question
    date
    label="Inception Date"
    value={this.state.inceptionDate}
    onChange={this.onChange("inceptionDate")}
    tabIndex={5}
    />


 interface QuestionProps {
  date?: boolean;
  value: any;
  label: string;
  money?: boolean;
  autoFocus?: boolean;
  select?: boolean;
  options?: Array<React.ReactElement<any>>;
  tabIndex: number;
  onChange: (e: React.SyntheticEvent<any>) => void;
}

const Question = (props: QuestionProps) => {
  const inputProps = {
    startAdornment: <InputAdornment position="start">{props.money ? "$" : ""}</InputAdornment>
  };

  let type = "text";
  if (props.date) {
    type = "date";
  }

  const t = (
    <TextField
      autoFocus={props.autoFocus}
      select={props.select}
      required
      value={props.value}
      label={props.label}
      InputProps={inputProps}
      inputProps={{ tabIndex: props.tabIndex }}
      onChange={props.onChange}
      variant="outlined"
      style={{ marginBottom: "15px" }}
      type={type}
      InputLabelProps={{ shrink: true }}
      fullWidth
    >
      {props.options}
    </TextField>
  );

  return t;

Дата Маска код:

const dateMask = [/[1-9]/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];

  private onChange = (field: keyof State, type?: "date" | "number") => (e: React.FormEvent) => {
    let val = (e.target as any).value;
    if (type === "number") {
      val = Numeral(val).format("0,0");
    }
    if (type === "date") {
      const v = conformToMask(val, dateMask, { guide: true, keepCharPositions: true });
      val = v.conformedValue;
    }

    this.setState({ [field]: val } as Pick<State, keyof State>);
  };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...