React - onClick事件不起作用

我剛剛開始學習React.js，目前我正在處理簡單的「待辦事宜」應用程序。我在我的提交按鈕上遇到了onClick事件問題，它似乎不起作用。我認爲我在將道具傳遞給父母元素方面存在問題。React - onClick事件不起作用

這裏是我的代碼：

var Application = React.createClass ({ 
 
    getInitialState: function() { 
 
     return { 
 
      title: "Your to do list", 
 
      subTitle: "What do you have to do?", 
 
      tasks: [], 
 
     } 
 
    }, 
 
    addTask: function(event) { 
 
     event.preventDefault(); 
 
     alert("it works!"); 
 
    }, 
 
    removeTask: function() { 
 
     var taskList = this.state.tasks; 
 
     var currentTask = taskList.find(function(task) { 
 
      return task.key == event.target.key; 
 
     }); 
 
     currentTask.remove(); 
 
     event.preventDefault(); 
 
     alert("it works!"); 
 
    }, 
 
    render: function() { 
 
     return (
 
      <div className="app-container"> 
 
       <Header title={this.state.title} /> 
 
       <NewTaskForm subTitle={this.state.subTitle} onChange= {this.addTask} /> 
 
       <TaskContainer tasks={this.state.tasks} /> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 

 
function Header(props) { 
 
    return (
 
     <div className="app-title"> 
 
      <h1>{props.title}</h1> 
 
     </div> 
 
    ); 
 
} 
 

 
function NewTaskForm(props) { 
 
    return (
 
     <div className="new-task-area"> 
 
      <form> 
 
       <label for="new-task">{props.subTitle}</label> 
 
       <input type="text" id="new-task" placeholder="Type in task" /> 
 
       <button type="submit" onClick={function() {props.onChange;}}>Add task!</button> 
 
      </form> 
 
     </div> 
 
    ); 
 
} 
 

 
NewTaskForm.propTypes = { 
 
    onChange: React.PropTypes.func.isRequired, 
 
}; 
 

 

 
function TaskContainer(props) { 
 
    return (
 
     <div className="new-task-container"> 
 
       {props.tasks.map(function(task) { 
 
        return (
 
         <p key={task.key}>{task.text}</p> 
 
        ); 
 
       })} 
 
     </div> 
 
    ); 
 
} 
 

 

 
ReactDOM.render(<Application />, document.getElementById("container"));

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>React to do app!</title> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet"> 
 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
    <script type="text/javascript" src="js/react.js"></script> 
 
    <script type="text/javascript" src="js/react-dom.js"></script> 
 
    <script type="text/javascript" src="js/babel-browser.min.js"></script> 
 
    <script type="text/babel" src="js/app.jsx"></script> 
 
</body> 
 
</html>

我真的很感激任何幫助，因爲我一直在試圖解決現在這一段時間。

來源

2017-02-05 Cezary Burzykowski

了'createClass'語法棄用。切換到'class App擴展React.component'。另外，當你調用'currentTask.remove（）'時，我懷疑你正在改變狀態？這個方法究竟做了什麼？我認爲你的意思是'this.setState（{tasks：this.state.tasks.filter（task => task.key！== event.task.key）}）' – goldylucks

@goldylucks我一直在使用' createClass'因爲我對React很新，但是我一定會進入'class App extends React.component'。 'currentTask.remove（）'只是我準備好的一個草稿，並希望稍後能夠使用它。我想這種方法從列表中刪除任務，所以對於我想使用'.find（）'的初學者，但是您指出的方式似乎更好:) –

你沒有調用函數：

<button type="submit" onClick={function() {props.onChange();}}>Add task!</button>

你也可以寫這樣的：

<button type="submit" onClick={props.onChange}>Add task!</button>

來源

2017-02-05 21:21:13

感謝您的幫助！ :) –

我還有一個問題，我想也許你可以幫助我。你知道我怎樣才能將事件作爲onClick函數參數傳遞給addTask方法？我想阻止用'event.preventDefault（）'提交。我嘗試過像這樣傳遞：'onClick = {props.onChange（event）}'和''但我只能得到錯誤在控制檯 –

試試這個：'onClick = {event => props.onChange（event）}' – goldylucks

React - onClick事件不起作用

回答

相關問題