Question

我是ReactJS的新手，正在尝试通过教程创建一个简单的待办事项列表应用程序。这是App.js中的代码：

 addItem = e => {
    e.preventDefault();
    const newItem = this.state.currentItem;
    if (newItem.text !== "") {
      const items = [...this.state.items, newItem];
      this.setState({
        items: items,
        currentItem: { text: "", key: "" }
      });
    }
  };

它抛出：

未捕获的TypeError：e.preventDefault不是函数在App._this.addItem（App.js：89）

如果我尝试将其更改为e.preventDefault并将其绑定到构造函数中，该错误就会消失，但该表单仍会在提交时重新加载（即preventDefault不起作用）。有人可以帮我吗？

编辑以添加addItem的调用方式：

这是我的TodoList.js：

import React, {Component} from 'react'

class TodoList extends Component{
    componentDidUpdate(){
        if(this.props.inputElement.current){
       this.props.inputElement.current.focus();
        }
    }
    render(){
        return(
            <div className="todoListMain">
                <div className="header">
                    <form onSubmit={this.props.addItem}>
                        <input 
                            placeholder="Task" 
                            ref={this.props.addItem}
                            value={this.props.currentItem.text}
                            onChange={this.props.handleInput}
                        />
                        <button type="submit">Add Task</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default TodoList;

Answer 1

删除输入标记中的ref属性，它将正常工作https://stackblitz.com/edit/react-womnwm

在输入字段中的

ref传递一个对象，该对象包含有关具有tagName，attribute，innerHTML等属性的标记的一些数据，并且它没有preventDefault方法

未捕获的TypeError：e.preventDefault不是函数

1 个答案: