Question

有人可以向我解释为什么我的反应形式在提交后仍然令人耳目一新吗？我正在制作一个简单的待办事项列表以熟悉反应，我似乎无法弄清楚这个错误。我想要做的是将一个任务添加到列表，列表显示。查看此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()

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

1 个答案: