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不是函数

回答

相关问题