ReactJS: Übergeben von Daten zwischen Kind und Eltern

Question

Ich kann nicht herausfinden, warum ich keine Daten bei meiner Elternkomponente erhalten kann.

Ich habe Eltern Komponente - AddButton und Kind Komponente - AddTasktBox. Ich möchte Titel von Kind zu Eltern übergeben.

Wahrscheinlich schlecht in AddButton Komponente - weil Browser mir Fehler wie dies geben:

"Typeerror: _this2.props.sendData ist keine Funktion"

Betrachten Sie einfach einreichen - Eingang „onClick = {this.handleClick} "(unten) - ist es mein Code starten

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class AddButton extends React.Component{ 

    constructor(props){ 
    super(props); 

    this.state = { 
     isHidden: false, 
     title: '', 
    }; 
    } 

    sendData = (data) => { 
    console.log(data); 
    this.setState({ 
     title: data 
    }) 
    }; 

    toggleHidden =() => { 
     this.setState({ 
     isHidden: !this.state.isHidden 
     }) 
    } 

    render(){ 
    return(
     <div> 
     <div 
      onClick={this.toggleHidden.bind(this)} 
      className="addtask__btn"> 
      + 
     </div> 
     {this.state.isHidden && <AddTaskBox handleClose={this.toggleHidden.bind(this)} handleClick={this.sendData.bind(this)}/>} 
     </div> 
    ); 
    } 
} 

class AddTaskBox extends React.Component{ 
    constructor(props){ 
     super(props); 

     this.state = { 
     title: '', 
     description: '' 
     }; 

     this.handleChange = this.handleChange.bind(this); 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleChange = (e) => { 
    this.setState({ 
     [e.target.name]: e.target.value 
    }) 

    } 

    handleClick =() => { 
    this.props.sendData(this.state.title); 
    } 

    render(){ 
    return(
     <div className="addtask__box" > 
     <div className="addtask__close" onClick={this.props.handleClose}>X</div> 
     <form > 
      <input 
      type="text" 
      name="title" 
      placeholder="Nazwa Czynności" 
      value={this.state.title} 
      onChange={this.handleChange}/> 

      <textarea 
      name="description" 
      value={this.state.description} 
      onChange={this.handleChange} 
      placeholder="Opis czynności"> 
      </textarea> 

      <input 
      className="btn" 
      type="submit" 
      value="submit" 
      onClick={this.handleClick}/> 
     </form> 
     </div> 
    ); 
    } 
} 

export {AddButton, AddTaskBox}; 

Answer 1

zum Passieren Sie passieren nicht sendData() als Stütze zu AddTaskBox

<AddTaskBox sendData={this.sendData} />