javascript - React.js, this.props.changeTitle 不是函数

Question

我正在尝试使用 React、ES6、Webpack 和 Babel 创建一个标题和一个文本框。当我们在文本框中键入内容时，标题内容会发生变化/重新呈现。
主要有两个文件，Header.js 和 app.js//应用程序.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)方法和<input>标记行从 app.js 到 Header.js 然后它工作正常，但否则我会收到错误“this.props.changeTitle 不是函数”，它位于 handleChange(e) 方法内部。

Answer 1

您没有将 prop 传递给 <App />当你渲染它时调用了changeTitle ReactDOM.render(<App/>,element);

看起来你只是想要 this.changeTitle而不是this.props.changeTitle