Reagieren onClick funktioniert nicht

Question

Ich habe Parent-Komponente TodoItem und zwei Kinderkomponenten: EditTodoItem und ShowTodoItem. Ich schalte diese Kinder-Komponenten mit State Edition. Wenn dies zutrifft, wird EditTodoItem angezeigt. Wenn die Ausgabe falsch ist, wird ShowTodoItem gerendert. Wenn wir auf ShowTodoItem klicken, sollte die Ausgabe wahr werden. Aber dieser Code nicht funktioniert:

import React from 'react' 
 
import PropTypes from 'prop-types' 
 
import ShowTodoItem from './TodoItem/ShowTodoItem' 
 
import EditTodoItem from './TodoItem/EditTodoItem' 
 

 
export default class TodoItem extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.handleOnTodoClick = this.handleOnTodoClick.bind(this); 
 
     this.handleOnEnterPress = this.handleOnEnterPress.bind(this); 
 
     this.state = { edition: false }; 
 
    } 
 

 
    handleOnTodoClick() { 
 
     console.log('edit'); 
 
     this.setState({ edition: true }); 
 
    } 
 

 
    handleOnEnterPress() { 
 
     this.setState({ edition: false }); 
 
    } 
 

 
    render() { 
 
     if (this.state.edition) { 
 
      return (
 
       <EditTodoItem item={this.props.item} onTodoChange={this.props.onTodoChange} onEnterPress={this.handleOnEnterPress} /> 
 
      ); 
 
     } 
 
     return (
 
      <ShowTodoItem onClick={this.handleOnTodoClick} item={this.props.item} onRemoveTodoClick={this.props.onRemoveTodoClick} /> 
 
     ); 
 
    } 
 
}

ich keine Fehler in Browser-Konsole haben, aber ich habe auch nicht das Ergebnis von console.log ('Bearbeiten');

Answer 1

onClick löst keine benutzerdefinierten Komponenten aus, sondern nur auf Dom-Knoten, die aus jsx erstellt wurden. Wenn Sie eine benutzerdefinierte Komponente weitergeben, wird diese als Property übergeben. Stellen Sie sicher, dass Ihr Code in ShowItemTodo eine Zeile hat, die wie folgt aussieht:

return (
    <button onClick={this.props.onClick}>click me</button> 
)