So I have a little problem here when making my portfolio. I'm trying to trigger a function in App.js but it has to be triggered when clicking a child child. Here is my App.js
class App extends Component {
introref = React.createRef()
timelineref = React.createRef()
projectref = React.createRef()
skillsref = React.createRef()
certifref = React.createRef()
downloadref = React.createRef()
blah = (link) => {
scrollToComponent(this.link, { duration: 1600 })
}
render() {
return (
<div className="App">
<Route path="/textversion" component={TextVersion} />
<Route path="/contact" component={Contact} />
<Navbar introref={this.introref}
timelineref={this.timelineref}
projectsref={this.projectsref}
skillsref={this.blah.bind(this, this.skillsref)}
certifref={this.certifref}
downloadref={this.downloadref}
onClickFunction={this.blah.bind(this, this.props.onClickFunction)}
/>
<Title content="I am Tristan Vermeesch" />
<hr />
<Bio />
<Introduction ref={this.introref} />
<Timeline ref={this.timelineref} />
<Projects ref={this.projectsref} />
<Skills ref={this.skillsref} />
<Certificates ref={this.certifref} />
<Download ref={this.downloadref} />
</div>
)
}
}
The function that needs tobe called here is blah, link is the ref of the element.
Here is my navbar
class Navbar extends Component {
render() {
const { introref, timelineref, projectsref, skillsref, certifref, downloadref } = this.props
return (
<div className="navbar" >
<Link to="/textversion" className="link">Text Version</Link>
<Link to="/contact" className="link">Contact</Link>
<Navitem dName={"Resume"} onClickFunction={this.downloadref} />
<Navitem dName={"Certificates"} onClickFunction={this.certifref} />
<Navitem dName={"Skills"} onClickFunction={this.skillsref} />
<Navitem dName={"Projects"} onClickFunction={this.projectsref} />
<Navitem dName={"Life"} onClickFunction={this.timelineref} />
<Navitem dName={"Me"} onClickFunction={this.introref} />
</div>
)
}
}
And here is the navitem, the item that should trigger the function onClick
class navitem extends Component {
render() {
return (
<div>
<div className="navItem" onClick={this.props.onClickFunction}>
{this.props.dName}
</div>
</div>
)
}
}
Can someone please clear everything out, because I tried to understand the whole props thing but I still don't understand.
In the App
component, change the onClickFunction
prop to :
onClickFunction={this.blah}
In the Navbar
component, change the Navitem
like this :
<Navitem dName={"Resume"} onClickFunction={this.props.onClickFunction.bind(this, downloadref)} />
<Navitem dName={"Certificates"} onClickFunction={this.props.onClickFunction.bind(this, certifref)} />
<Navitem dName={"Skills"} onClickFunction={this.props.onClickFunction.bind(this, skillsref)} />
<Navitem dName={"Projects"} onClickFunction={this.props.onClickFunction.bind(this, projectsref)} />
<Navitem dName={"Life"} onClickFunction={this.props.onClickFunction.bind(this, timelineref)} />
<Navitem dName={"Me"} onClickFunction={this.props.onClickFunction.bind(this, introref)} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.