自己写的简单Person组件，点击按钮无效

Question

自己写的Person组件

Person.Component.js 文件

import React from 'react';

import PropTypes from 'prop-types'; // ES6

class Person extends React.Component {
    constructor (props) {
        super(props);
        this.state = { smiling: false };
    }
    handleClick(){
        this.setState({smiling: !this.state.smiling});
    };
    componentWillMount () {
        // add event listeners (Flux Store, WebSocket, document, etc.)
    }
    componentDidMount () {
        // React.getDOMNode()
    }
    componentWillUnmount () {
        // remove event listeners (Flux Store, WebSocket, document, etc.)
    }
    smilingMessage () {
        return (this.state.smiling) ? "is smiling" : "";
    }
    render () {
        return (
            <div onClick={this.handleClick.bind(this)}>
                {this.props.name} {this.smilingMessage.bind(this)}
            </div>
        );
    }
}

Person.defaultProps = {
    name: 'Guest'
};

Person.propTypes = {
    name: PropTypes.string
};

export default Person;

为什么点击不好使

我应该在Person.Component.js哪个地方打断点检测

Person.propTypes = {
    name: PropTypes.string
};

这行代码什么意思？

打断点的问题

能看到那个值的变化，是这样打断点吗？

Answer 1

原因楼上说了，就是similingMessage函数没执行
Function.prototype.bind返回的是一个函数，所以你应该这么写

 return (
            <div onClick={this.handleClick.bind(this)}>
                {this.props.name} {this.smilingMessage.bind(this)()}
            </div>
        );

Answer 2

点击事件有没有执行
state状态有没有更新
smilingMessage这个函数在状态更新后有没有执行（应该就是函数没执行）
可以吧smilingMessage去掉这样写

render() {
    var smiling = (this.state.smiling) ? "is smiling" : "";
    return (
        <div onClick={this.handleClick.bind(this)}>
            {this.props.name} {smiling}
        </div>
    )
}