反应：onClick event.currentTarget.textContent 返回未定义的 onClick

Question

在我的网站上，它目前会根据用户的输入向用户显示电影列表。

当用户点击渲染的电影标题时，我想设置状态（chosenOne：他们点击的电影标题）。

目前，当我点击电影标题时，它 returns 显示以下错误：

Uncaught TypeError: Cannot read property 'onClick' of undefined
    at onClick (Fav.js:62)

有什么办法可以解决这个问题吗？非常感谢任何帮助。

import React, { Component } from 'react'
import axios from 'axios';
import '../styles/Rec.scss'

export class Fav extends Component {
    constructor (props) {
        super (props) 
            this.state = {
                inputOne: '',
                chosenOne: '',
                movies:[],
            };
    }

    onChangeOne = (event) => {
        this.setState({
            inputOne: event.target.value
        },()=>{
            if(this.state.inputOne && this.state.inputOne.length > 1) {
                this.getInfo()
            } else {
            }
        })

    }

    onClick = (event) =>{
        this.setState({
            chosenOne: event.currentTarget.textContent
        })
        console.log(this.state.chosenOne)
    }

    onSubmit = (event) => {
        event.preventDefault();
    }

    getInfo = () => {
        let url = `https://api.themoviedb.org/3/search/movie?api_key=''&language=en-US&query='${this.state.inputOne}'&page=1&include_adult=false`
        axios.get(url)
        .then(res => {
        if (res.data) {
            const movieData = res.data.results.filter(movie => movie.poster_path != null);
            this.setState({movies: movieData});
        }
        console.log(this.state.movies)
    })
    }

    render() {
        return (
            <div>
                <h1>Favorite Movie of All Time</h1>
                <form onSubmit={this.onSubmit}>
                    <input onChange={this.onChangeOne}/>
                    <div className="rec__container">
                        {this.state.movies && this.state.movies.slice(0,3).map(function(movie, genre_ids) {
                            return(
                                <div className="rec__sample">
                                    <img className="rec__img" src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} alt="movie poster"/>
                                    <p onClick={event => this.onClick(event)}>{movie.title}</p>
                                </div>
                            )
                        })}
                    </div>
                </form>
            </div>
        )
    }
}

export default Fav

Answer 1

我很确定问题是 this.onClick 中的 this 未定义。当它未正确绑定到 class.

时会发生这种情况

我建议将 map 之后声明的函数更改为箭头函数。

<div className="rec__container">
  {this.state.movies &&
    this.state.movies.slice(0, 3).map((movie, genre_ids) => {
      return (
        <div className="rec__sample">
          <img className="rec__img" src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} alt="movie poster" />
          <p onClick={event => this.onClick(event)}>{movie.title}</p>
        </div>
      );
    })}
</div>;

此外，您在构造函数中绑定了 onClick 函数并将其用作箭头函数。绑定不适用于箭头函数。

删除 this.onClick = this.onClick.bind(this) 或将 onClick 转换为简单函数而不是箭头函数。

反应：onClick event.currentTarget.textContent 返回未定义的 onClick

React: onClick event.currentTarget.textContent returning onClick of undefined

forms

state

ref

event-handling

reactjs