[英]ReactJS onClick setState to different element
I am new to react, and I am having a little issue. 我是新来的反应,我有一点问题。 Maybe somebody can help me out.
也许有人可以帮助我。
So the issue is that I am unable to triger the element I want with onCLick function. 所以问题在于我无法使用onCLick函数来调整我想要的元素。 Now I am trying to remove the navigation when
现在我正试图删除导航时
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {navStatus: "navHide"};
}
navClose() {
var navOpened = document.getElementById("myNav");
navOpened.setState({navStatus: "navHide"});
}
navOpen() {
this.setState({navStatus: "navShow"});
}
render() {
return(
<nav onClick={this.navOpen.bind(this)}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose.bind(this)}>
<object className="navCloseBtn" type="image/svg+xml" data="svg/close.svg"></object>
</div>
</div>
</nav>
);
}
}
The error I am having is 我遇到的错误是
nav.js:12 Uncaught TypeError: navOpened.setState is not a function
Also if you notice some patterns that I could improve in my code, I would really appreciate the feedback. 另外,如果您注意到我可以在代码中改进的某些模式,我会非常感谢您的反馈。
Thank You! 谢谢!
Only react components have setState
method. 只有react组件有
setState
方法。 Working example: 工作范例:
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {
navStatus: "navHide"
};
this.navClose = this.navClose.bind(this);
this.navOpen = this.navOpen.bind(this);
}
navClose(e) {
e.stopPropagation();
this.setState({
navStatus: "navHide"
});
}
navOpen() {
this.setState({
navStatus: "navShow"
});
}
render() {
return(
<nav onClick={this.navOpen}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose}>
<object className="navCloseBtn" type="image/svg+xml" data="svg/close.svg"></object>
</div>
</div>
</nav>
);
}
Also you should bind event handlers in constructor instead of render
method. 您还应该在构造函数中绑定事件处理程序而不是
render
方法。
import React from "react";
import ReactDOM from "react-dom";
export default class Nav extends React.Component {
constructor() {
super();
this.state = {navStatus: "navHide"};
}
navClose() {
var navOpened = document.getElementById("myNav");
this.setState({navStatus: "navHide"});
}
navOpen() {
this.setState({navStatus: "navShow"});
}
render() {
return(
<nav onClick={this.navOpen.bind(this)}>
<div id="myNav" className={this.state.navStatus}>
<div className="navClose" onClick={this.navClose.bind(this)}>
<object className="navCloseBtn" type="image/svg+xml" data="svg/close.svg"></object>
</div>
</div>
</nav>
);
}
}
You can also use inline functions, 您还可以使用内联函数,
<nav onClick={() => this.setState(navStatus: "navShow")}>
but some argue that it has performance issue, https://medium.com/front-end-weekly/dont-use-inline-arrow-functions-as-properties-e3cae2680b9d 但有些人认为它存在性能问题, https://medium.com/front-end-weekly/dont-use-inline-arrow-functions-as-properties-e3cae2680b9d
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.