[英]Change prop of child component when s
I'm building my site with Gatsby and I'm trying to change the URL prop of the Plyr component when a user clicks on a lesson title. 我正在使用Gatsby构建我的网站,并且试图在用户单击课程标题时更改Plyr组件的URL属性。 Right now the URL is set in the
this.state
with data pulling from a GraphQL query to Contentful. 现在,URL已在
this.state
设置,数据已从GraphQL查询拉至Contentful。
Here's a live version: https://brave-jepsen-d8ae28.netlify.com/courses/my-first-course 这是一个实时版本: https : //brave-jepsen-d8ae28.netlify.com/courses/my-first-course
I created a handleChange function to set the state with the event.target.id
, but it's returning errors once I click on a lesson paragraph tag. 我创建了一个handleChange函数,以使用
event.target.id
设置状态,但是一旦单击课程段落标记,它就会返回错误。 Any idea what's going on? 知道发生了什么吗? I tested that the event Id was being captured with a
console.log(event.target.id)
, and it was, so I'm assuming it's something with rendering the component again once I attempt to set the state. 我测试了事件id是通过
console.log(event.target.id)
捕获的,因此,我假设尝试设置状态后再次渲染了组件。
Any help is appreciated! 任何帮助表示赞赏!
import React, { Component } from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'
import Plyr from 'react-plyr'
import '../components/plyr.css'
// On click, set the value of that elements video url to video player url value
class CourseTemplate extends Component {
constructor(props) {
super(props);
this.state = {
url: props.data.contentfulCourse.featureVideo
};
this.handleChange = this.handleChange.bind(this);
};
handleChange(event) {
event.stopPropagation();
// console.log(event.target.id)
this.setState(prevState => ({
url: event.target.id
}));
}
render() {
const courseContent = this.props.data.contentfulCourse
return (
<Layout>
<Plyr key={this.state.url} type="vimeo" videoId={this.state.url}/>
<p>{this.state.url}</p>
<h1>{courseContent.title}</h1>
<p>{courseContent.shortDescription}</p>
<div>
{courseContent.teachers.map(teacher => (
<div key={teacher.id}>
<p>by <Link to={`/teachers/${teacher.id}`}>{teacher.name}</Link></p>
</div>
))}
</div>
<div>
{courseContent.lessons.map(lesson => (
<div key={lesson.lessonVideo}>
<p onClick={this.handleChange} id={lesson.lessonVideo}>{lesson.title}</p>
</div>
))}
</div>
</Layout>
)
}
};
export default CourseTemplate
export const query = graphql`
query CourseTemplate($id: String!) {
contentfulCourse(id: {eq: $id}) {
title
shortDescription
featureVideo
slug
teachers {
id
name
}
lessons {
id
title
lessonVideo
slug
}
}
}
`
Errors I'm receiving: 我收到的错误:
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'target' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().
TypeError: Cannot read property 'id' of null at ProxyComponent.eval
You don't need to use event
at all for this. 您根本不需要使用
event
。 You also don't need to pass a function to setState
since you're not doing anything with prevState
. 您也不需要将函数传递给
setState
因为您没有对prevState
做任何事情。
import React, { Component } from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import Plyr from "react-plyr"
import "../components/plyr.css"
class CourseTemplate extends Component {
constructor(props) {
super(props)
this.state = {
url: props.data.course.featureVideo,
}
this.setVideoUrl = this.setVideoUrl.bind(this)
}
setVideoUrl(url) {
this.setState({ url })
}
render() {
const courseContent = this.props.data.course
return (
<Layout>
<Plyr type="vimeo" videoId={this.state.url} />
<div>
{courseContent.lessons.map(lesson => (
<div key={lesson.id}>
<p onClick={() => this.setVideoUrl(lesson.videoUrl)}>
{lesson.title}
</p>
</div>
))}
</div>
</Layout>
)
}
}
export default CourseTemplate
export const query = graphql`
query CourseTemplate($id: String!) {
course: contentfulCourse(id: { eq: $id }) {
title
shortDescription
featureVideo
slug
teachers {
id
name
}
lessons {
id
title
videoUrl: lessonVideo
slug
}
}
}
`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.