javascript - 即使在添加 event.prefeventDefault 后，React 表单仍然会刷新

Question

谁能向我解释一下为什么我的 react 表单提交后仍然刷新？我正在制作一个简单的待办事项列表来熟悉 react ，但我似乎无法弄清楚这个错误。我想做的是将任务添加到列表中，然后显示该列表。看看这个codepen查看我的代码，对于格式不佳表示抱歉。

class TaskList extends React.Component {
 render() {
 var taskEntries = this.props.entries;

 function createTasks(task) {
  return <li key={task.key}>{task.text}</li>
 }

 var listTasks = taskEntries.map(createTasks);

 return (
   <ul>
     {listTasks}
   </ul>
   );
  }
}

class Task extends React.Component {
 constructor() {
 super();
 this.state = {
   tasks: [],
 };
 this.addTask = this.addTask.bind(this);
}

addTask(evt) {
 evt.preventDefault;
 var taskArray = this.state.tasks;

taskArray.push(
   {
    text: this.textInput.value,
    key: Date.now()
   }
);

this.setState({
  tasks: taskArray
});
}

render() {
return (
  <div>
    <form onSubmit={this.addTask}>
      <label htmlFor="title">Title of Task</label>
      <input type="text" ref={(input) => { this.textInput = input; }} />
      <label htmlFor="description">Description</label>
      <input type="submit"/>
    </form>
    <TaskList entries={this.state.tasks} />
  </div>
);
 }
}

var destination = document.querySelector(".container");

ReactDOM.render(
  <Task />,
  destination
);

Answer 1

你应该改变

evt.preventDefault

至

evt.preventDefault()