Question

我想将“活动”课程切换到我的

目前我有此代码：

class VideoListItem extends React.Component {

render() {
const {video, onVideoSelect} = this.props
const{} =this.props
const imageUrl=video.snippet.thumbnails.default.url;

return (
    <li onClick={() => onVideoSelect(video)} className="list-group-item">
        <div className="video-list media">

            <div className="media-left">
                <img className="media-object" src={imageUrl} />
            </div>

            <div className="media-body">
                <div className="media-heading">{video.snippet.title}</div>  
            </div>

       </div>
    </li>
)
}

}

因此，最终我将在单击该li后得到“ list-group-item active”。问题是我还有另一个运行onClick的功能。我尝试过这种方法

class VideoListItem extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
          animate: false
        }

        this.handleClick = this.handleClick.bind(this);
      }

      handleClick(e) {
        // modify the state, this will automatically recall render() below.
        this.setState((prevState) => {
          return { animate: !prevState.animate }
        });
      }
    onClick(event) {
        () => onVideoSelect(video);
        this.handleClick;
     }
    render() {
    let animationClasses = (this.state.animate ? ' active': '');
    const {video, onVideoSelect} = this.props
    const imageUrl=video.snippet.thumbnails.default.url;

    return (
        <li className={`list-group-item${animationClasses}`} onClick{this.onClick} >
            <div className="video-list media">

                <div className="media-left">
                    <img className="media-object" src={imageUrl} />
                </div>

                <div className="media-body">
                    <div className="media-heading">{video.snippet.title}</div>  
                </div>

           </div>
        </li>
    )
    }
}

但是我收到以下错误：“未捕获的TypeError：无法读取未定义的属性'handleClick'”。在这种情况下，onClick事件根本不会触发。单击此

时如何切换班级？

Answer 1

在构造函数中，您应该编写：

this.handleClick = this.handleClick.bind(this);

onClick 的

OR定义应为：

onClick = (event) =>  {}

这两种方式将上下文this绑定到该函数。箭头函数将this隐式绑定到该函数。

Answer 2

还将您的onClick方法绑定到构造函数中，并检查您的onClick方法。

 constructor(props) {
    super(props);
    this.state = {
      animate: false
    }
    this.handleClick = this.handleClick.bind(this);
    this.onClick = this.onClick.bind(this); 
}

onClick(event) {
    this.props.onVideoSelect(video);
    this.handleClick();
}

切换“主动”上课

2 个答案: