ReactJS onClick setState到不同的元素
ReactJS onClick setState到不同的元素
提问于 2016-06-26 20:27:13
我是一个新的反应，我有一个小问题。也许有人能帮我。
所以问题是我不能用onCLick函数触发我想要的元素。现在，我正在尝试删除导航，当
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>
);
}
}我遇到的错误是
nav.js:12 Uncaught TypeError: navOpened.setState is not a function此外，如果您注意到我可以在代码中改进的一些模式，我将非常感谢您的反馈。
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-26 20:41:50
只有react组件具有setState方法。工作示例：
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>
);
}此外，您应该在构造函数中绑定事件处理程序，而不是在render方法中。
Stack Overflow用户
发布于 2016-06-26 20:53:02
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>
);
}
}Stack Overflow用户
发布于 2019-06-08 01:00:25
您还可以使用内联函数，
<nav onClick={() => this.setState(navStatus: "navShow")}>但有些人认为它存在性能问题，https://medium.com/front-end-weekly/dont-use-inline-arrow-functions-as-properties-e3cae2680b9d
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38038521
复制相关文章
相似问题
腾讯云开发者
