Имитация события нажатия в React с помощью TypeScript material-ui - PullRequest
Новая
       21

Имитация события нажатия в React с помощью TypeScript material-ui

1 голос
/ 25 апреля 2020

Я рендерил некоторые текстовые поля материала-интерфейса. Если вручную ввести значение внутри него, оно будет работать правильно. Он использует handleChange () (change) и handleBlur () (autosave) для обработки этих событий. но сценарий заключается в том, что мне нужно обновить значение не вручную, а из магазина.

Итак, если я передаю значение из магазина, оно фактически не обновляет значение, если я не щелкну внутри поля и щелкните или выберите вкладку. значение отображается внутри поля, но не вызывает handleChange () и handleBlur (), которые являются единственным способом обновления значения внутри. Также мне нужно набрать хотя бы значение.

Подход:

Я устанавливаю onFocus в поле и на его handleFocus я пытаюсь либо симулировать click () и blur () или вызывая handleClick () и handleBlur (). Если я имитирую событие щелчка,

Uncaught TypeError: element.click не является функцией

Если я пытаюсь вызвать handleChange () и handleBlur ()

enter image description here

  readonly refO: React.RefObject<HTMLInputElement>;

  constructor(props: InputProps) {
    super(props);
    this.refO = React.createRef<HTMLInputElement>();
  }

...
        <TextField
          autoFocus
          inputRef={this.refO}
          id={this.labelId}
          required={required}
          label={label}
          error={error}
          value={this.setValue()}
          onBlur={handleBlur}
          onChange={handleChange}
          disabled={disabled}
          fullWidth
          type={type}
          InputLabelProps={InputLabelProps}
          InputProps={{ className: cx({ [classes.modified]: isModified }) }}
          onFocus={this.handleFocus}
        />

Что можно сделать внутри handleFocus () для достижения этой цели. или правильный подход для достижения этого. Я очень новичок в TypeScript. мой подход неправильный или любой другой способ преодолеть это. 

  handleFocus = (element: HTMLInputElement) => {
   element.click();
   this.props.handleChange();
   this.props.handleBlur();
  }

PS: не могу добавить больше кода из-за некоторых проблем с чувствительностью.

1 Ответ

0 голосов
/ 26 апреля 2020

решил проблему.

Я знал, что это нужно сделать изнутри handleFocus. но то, что я делал, вызывает другие обработчики событий из этого. тогда я подумал, почему я должен. функция была вызвана, поэтому просто обновите значения из нее. 

 handleFocus = (value) => {
  //  update my value
 }

это нетрадиционно, но все, что нам нужно, это результат.

ps: я даже пинговал несколько человек в твиттере (это имеет поставить нашу репутацию на карту. это была гонка со временем). я был в таком отчаянии. я извиняюсь перед ними.

...