Question

我对React js很新，我尝试做一些非常简单的事情，当用户输入文本输入时，p标签顶部的文本应该随用户而改变在打字。这是相关代码：

index.js

import { render } from 'react-dom'
import App from './components/App'

var Name = React.createClass({
getInitialState: function() {
    return {name: ''}
},
changeName: function(event) {
    this.setState({
        name: event.target.value
    });
},
render: function() {
    return (
                <div>
                    <p>Your name is: {this.state.name}</p>
                    <App setName={this.changeName} />
                </div>
            )
    }
});

render( (<Name />), document.getElementById('content'));

App.js 来自＆＃39; ../ style / base.scss＆＃39;;

的导入样式

export default function() {
    return (
                <div>
                    <input type="text" placeholder="Enter text!" className="fancy" onChange={this.props.setName} />
                </div>
    );
}

我认为这样可行，但根本没有任何内容呈现给页面。当我在浏览器上检查控制台时，它会告诉我：＆＃34; 未捕获的TypeError：无法读取属性＆＃39;道具＆＃39;未定义的＆＃34;。这必须意味着＆＃34;这个＆＃34;对象未定义，但我无法想出原因。我没有使用es6类语法，所以我认为＆＃34;这个＆＃34;会工作得很好。有人能告诉我发生了什么吗？提前感谢任何愿意看这个的人。

Answer 1

您正在使用App.js作为无状态功能组件。他们没有this。而是将props作为对象参数传递给您的函数。您可以通过在函数中接受对象（例如props）并访问props.setName来解决此问题，或者您可以通过解构将其拉出来并定义您的函数，如下所示：export default function({ setName }) {和然后引用setName而不是this.props.setName

this.props似乎未定义，我无法弄清楚为什么

1 个答案: