onClick侦听器未触发反应

Question

I'm trying to make a simple todo app in react and am at the point where I am trying to delete items. So I have created a removeTodo method in my App.js file. I have a todoList component which loops through the todos array in the state.todos and then injects the todo component. Although I am looking at a way in which I can pass the removeTodo function down to the todo component. Here is my attempt at doing this...

 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>
);
}

Here's my todoList Component

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>

);

}

Whenever I go to click on the rendered Todo nothing happens, why is the onClick not firing? I'm new to react so sorry in advance for any ignorance

Answer 1

onClick will be like any other prop given to the Todo component, so you need to add the onClick function in the props to a onClick prop on an element in Todo as well.

Example

 function TodoList(props) { return ( <ul className="todoList"> {props.todos.map((todo, index) => ( <Todo onClick={() => console.log(`Clicked ${index}!`)} name={todo.name} key={index} /> ))} </ul> ); } function Todo(props) { return <li onClick={props.onClick}>{props.name}</li>; } ReactDOM.render( <TodoList todos={[{ name: "foo" }, { name: "bar" }]} />, document.getElementById("root") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>