属性'inputItem'在'EventTarget'类型上不存在-语义UI，React和打字稿

Question

我正在使用React，Typescript和Semantic UI react组件。添加成功的项目后，我试图清除输入字段。在debugger期间，我可以看到要设置为空字符串的event.currentTarget.inputName.value。

我一直收到以下错误之一：

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

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

Typescript不断填充错误的方法。

 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: "" });
  }

语义UI表单

• 在Form.Input]内>我有一个名为name="inputItem"的参数，通过执行e.target.inputItem或e.currentTarget.inputItem]可以在console.log / debugger中看到该参数>

   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>
      );
    }
  

我正在寻找有关如何进行这项工作的解决方案，或者寻求一种更优化的方式来实现这一目标。

提前感谢。

我正在使用React，Typescript和Semantic UI react组件。添加成功的项目后，我试图清除输入字段。在调试器中，我可以看到event.currentTarget.inputName.value ...

Answer 1

尝试在访问输入值之前调用e.persist（）。

您可以参考https://reactjs.org/docs/events.html了解更多信息