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事件不起作用

回答

相关问题