React.js, this.props.changeTitle이 함수가 아닙니다.

Question

React, ES6, Webpack 및 Babel을 사용하여 아래에 제목과 텍스트 상자를 만들려고합니다. 텍스트 상자 안에 입력 할 때 제목의 내용이 변경되거나 다시 렌더링됩니다.
두 파일은 주로이 있으며, Header.js 및 app.js //app.js

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

import Header from "./Header/Header"; 
export default class App extends React.Component 
{ 
    constructor() 
    { 
     super(); 
     this.state = ({title: "Welcome"}); 

    } 

    changeTitle(newtitle) 
    { 
     this.setState({title: newtitle}); 
    } 

    handleChange(e) 
    { 
     const input = e.target.value; 
     this.props.changeTitle(input); 
    } 

    render() 
    { 
     return(
      <div> 
       <Header changeTitle = {this.changeTitle.bind(this)} title = {this.state.title}/> 
       <input onChange={this.handleChange.bind(this)} /> 
      </div> 
      ); 
    } 
} 
    const element = document.getElementById('app'); 
    ReactDOM.render(<App/>,element); 
====================================================== 
//Header.js 
import React from "react"; 
import ReactDOM from "react-dom"; 

export default class Header extends React.Component 
{ 
    render() 
    { 
     return(
      <div> 
       <h1>{this.props.title}</h1> 
      </div> 
      ); 
    } 
} 

나는 handleChange (예) 방법 다음 Header.js하는 app.js에서 <input> 태그 라인을 이동하는 경우 그것은 잘 작동하지만, 그렇지 않으면 "this.props.changeTitle은 handleChange (e) 메서드 내부에있는 함수가 아닙니다"오류가 발생합니다.

Answer 1

당신은 방금 대신 this.props.changeTitle

Answer 2

Theres는 <Header/>에 기능 changeTitle()을 통과 할 필요의 this.changeTitle을 원하는 것 같습니다 ReactDOM.render(<App/>,element);

을 렌더링 할 때 changeTitle라는 <App />에 소품을 통과하지 못한 단지 handleChange() 번은 this.setState()입니다.

handleChange(e) 
{ 
    const input = e.target.value; 
    this.setState({title: input}); 
} 

render() 
{ 
    return(
     <div> 
      <Header title = {this.state.title}/> 
      <input onChange={this.handleChange.bind(this)} /> 
     </div> 
     ); 
} 

누군가가 올바르게 질문에 대답하는 경우, 다시 다시 쓰게됩니다 <App/>() <Header/>