React.js，this.props.changeTitle不是函數

-1

我試圖在它下面使用React，ES6，Webpack和Babel創建標題和文本框。當我們在文本框內鍵入內容時，標題的內容會改變/重新呈現。
主要有兩種文件，Header.js和app.js //app.jsReact.js，this.props.changeTitle不是函數

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）中的方法和從app.js到Header.js然後<input>標記線它工作正常，但否則我會得到錯誤，「this.props.changeTitle不是一個函數」，這是在handleChange（e）方法內。

來源

2016-12-25 AmirHossein Rd

如果有人正確地回答了你的問題，點擊旁邊的空複選標記的答案，以紀念它是正確的。否則，更新問題。 –

你不通過一個道具叫<App />時changeTitle渲染它ReactDOM.render(<App/>,element);

看起來你只是想this.changeTitle代替this.props.changeTitle

來源

2016-12-25 01:03:42

世界上沒有必要的功能changeTitle()傳遞給<Header/>剛有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/>

來源

2016-12-25 03:25:56 DirtyRedz

React.js，this.props.changeTitle不是函數

回答

相關問題