即使在添加event.prefevent後React表格仍然會刷新默認

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()