Свойство 'inputItem' не существует для типа 'EventTarget' - Semanti c -Ui, React и Typescript - PullRequest
Новая
       19

Свойство 'inputItem' не существует для типа 'EventTarget' - Semanti c -Ui, React и Typescript

0 голосов
/ 11 марта 2020

Я использую компоненты реакции React, Typescript и Semanti c UI. Я пытаюсь очистить поле ввода после добавления успешного элемента. Во время debugger я вижу event.currentTarget.inputName.value, который я хочу установить в пустую строку.

Я получаю одну из следующих ошибок:

Property 'inputItem' does not exist on type 'EventTarget'.

Property 'inputItem' does not exist on type 'EventTarget & Element'. TS2339

Метод, в котором машинопись продолжает заполнять ошибку. 

 handleAdd(e: SyntheticEvent) {
    e.preventDefault();
    e.currentTarget.inputItem.value = "";
    console.log(e);
    // target.value = "";
    debugger;
    const items: any = this.state.items;
    this.setState({ items: [...items, this.state.item], item: "" });
  }

Семанти c -UI Форма

  • В пределах Форма. Вход У меня есть параметр с именем name="inputItem", который я могу увидеть в console.log / debugger, выполнив e.target.inputItem или e.currentTarget.inputItem
 public render(): JSX.Element {
    return (
      <div className="main">
        <Segment className="mt-5 main-segment">
          <Header className="flex-col">
            <span>Today </span>
            <span>{todaysDate()}</span>
            <span>{currentTime()}</span>
          </Header>
          <Form className="flex-row" onSubmit={this.handleAdd}>
            <Form.Input
              id="inputField"
              placeholder="add todo item"
              className="todo-input"
              name="inputItem"
              onChange={this.handleItemChange}
            />

            <Form.Button content="Add" name="add-item" primary />
          </Form>
          <div id="list-items">{this.renderItems()}</div>
        </Segment>
      </div>
    );
  }

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

Заранее спасибо.

1 Ответ

1 голос
/ 11 марта 2020

Попробуйте вызвать e.persist (), прежде чем получить доступ к входному значению.

Вы можете обратиться https://reactjs.org/docs/events.html для получения дополнительной информации

...