Question

我正在尝试制作一个简单的待办事项应用，以进行响应，并且正要删除项目。因此，我在App.js文件中创建了一个removeTodo方法。我有一个todoList组件，该组件在state.todos中遍历todos数组，然后注入todo组件。尽管我正在寻找一种方法，可以将removeTodo函数向下传递给todo组件。这是我的尝试...

 removeTodo(){
//just need this function to fire
console.log("1234")

}

 render() {

return (
  <div className="App">

   <div className="header">
    <h1>Todo Application</h1>
   </div>

   <div className="header">
    <input
    type="text"
    ref={((ref) => this.input = ref)}
    value={this.state.todoText}
    onKeyPress={this.handleSub.bind(this)}
    />
   </div>
   <TodoList todos={this.state.todos} remove={this.removeTodo.bind(this)}/>
   //passing in removeTodo method to props       
  </div>
);
}

这是我的todoList组件

function todoList(props){

return (

<ul className="todoList">

{props.todos.map((todo, index) => {
    return(
    <Todo onClick={props.remove} name={todo.name} key={index}/>
    //the todo component just renders an li with the name inside the todos 
      array
    );
})}

</ul>

);

}

每当我单击渲染的Todo时，什么都没有发生，为什么onClick不触发？我是新来的，如果有任何不了解，请提前对不起。

Answer 1

d类似于为base组件提供的任何其他属性，因此您需要将属性中的onClick函数添加到元素上的Todo属性中在onClick中也是如此。

示例

onClick

Todo

onClick侦听器未触发反应

1 个答案: