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（e）方法和<input>标记行从app.js移动到Header.js然后它工作正常，但否则我得到错误＆＃34; this.props.changeTitle不是函数＆＃34;，它位于handleChange（e）方法中。

Answer 1

在呈现<App />

时，您不会将道具传递给名为changeTitle的ReactDOM.render(<App/>,element); {/ 1}}

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

Answer 2

Theres无需将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>
        );
}

React将重新呈现<App/>，而{i}将重新呈现（）<Header/>

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

2 个答案: