React.js、this.props.changeTitleは関数ではありません

Question

React、ES6、Webpack、Babelを使用してタイトルとその下にテキストボックスを作成しようとしています。テキストボックスの中に入力すると、タイトルの内容が変更/再レンダリングされます。
2つのファイルが主にあり、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（e）の方法と、その後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/>