Javascript 在 React 中切换类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36403101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Class in React
提问by Hiero
I'm using react for a project where I have a menu button.
我正在为一个有菜单按钮的项目使用 react。
<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
And a Sidenav component like:
还有一个 Sidenav 组件，如：
<Sidenav ref="menu" />
And I wrote the following code to toggle the menu:
我编写了以下代码来切换菜单：
class Header extends React.Component {
constructor(props){
super(props);
this.toggleSidenav = this.toggleSidenav.bind(this);
}
render() {
return (
<div className="header">
<i className="border hide-on-small-and-down"></i>
<div className="container">
<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
<Menu className="menu hide-on-small-and-down"/>
<Sidenav />
</div>
</div>
)
}
toggleSidenav() {
this.refs.btn.classList.toggle('btn-menu-open');
}
componentDidMount() {
this.refs.btn.addEventListener('click', this.toggleSidenav);
}
componentWillUnmount() {
this.refs.btn.removeEventListener('click', this.toggleSidenav);
}
}
The thing is that this.refs.sidenavis not a DOM element and I cant add a class on him.
问题是这this.refs.sidenav不是一个 DOM 元素，我不能在他身上添加一个类。
Can someone explain me how to toggle class on the Sidenavcomponent like I do on my button?
有人可以解释我如何Sidenav像在按钮上那样在组件上切换类吗？
回答by Aaron Franco
You have to use the component's State to update component parameters such as Class Name if you want React to render your DOM correctly and efficiently.
如果您希望 React 正确有效地呈现您的 DOM，您必须使用组件的 State 来更新组件参数，例如类名称。
UPDATE: I updated the example to toggle the Sidemenu on a button click. This is not necessary, but you can see how it would work. You might need to use "this.state" vs. "this.props" as I have shown. I'm used to working with Redux components.
更新：我更新了示例以在单击按钮时切换 Sidemenu。这不是必需的，但您可以看到它是如何工作的。正如我所展示的，您可能需要使用“this.state”与“this.props”。我习惯于使用 Redux 组件。
constructor(props){
super(props);
}
getInitialState(){
return {"showHideSidenav":"hidden"};
}
render() {
return (
<div className="header">
<i className="border hide-on-small-and-down"></i>
<div className="container">
<a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a>
<Menu className="menu hide-on-small-and-down"/>
<Sidenav className={this.props.showHideSidenav}/>
</div>
</div>
)
}
toggleSidenav() {
var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";
this.setState({"showHideSidenav":css});
}
Now, when you toggle the state, the component will update and change the class name of the sidenav component. You can use CSS to show/hide the sidenav using the class names.
现在，当您切换状态时，组件将更新并更改 sidenav 组件的类名。您可以使用 CSS 来显示/隐藏使用类名称的 sidenav。
.hidden {
display:none;
}
.show{
display:block;
}
回答by Bikas
refsis not a DOM element. In order to find a DOM element, you need to use findDOMNodementhod first.
refs不是 DOM 元素。为了找到一个DOM元素，你需要先使用findDOMNodementhod。
Do, this
做这个
var node = ReactDOM.findDOMNode(this.refs.btn);
node.classList.toggle('btn-menu-open');
alternatively, you can use like this (almost actual code)
或者，您可以像这样使用（几乎是实际代码）
this.state.styleCondition = false;
<a ref="btn" href="#" className={styleCondition ? "btn-menu show-on-small" : ""}><i></i></a>
you can then change styleConditionbased on your state change conditions.
然后您可以styleCondition根据您的状态更改条件进行更改。
回答by Martin McKeaveney
Ori Drori's comment is correct, you aren't doing this the "React Way". In React, you should ideally not be changing classes and event handlers using the DOM. Do it in the render() method of your React components; in this case that would be the sideNav and your Header. A rough example of how this would be done in your code is as follows.
Ori Drori 的评论是正确的，你不是在做“反应方式”。在 React 中，最好不要使用 DOM 更改类和事件处理程序。在 React 组件的 render() 方法中进行；在这种情况下，这将是 sideNav 和您的标题。如何在您的代码中完成此操作的粗略示例如下。
HEADER
标题
class Header extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div className="header">
<i className="border hide-on-small-and-down"></i>
<div className="container">
<a ref="btn" href="#" className="btn-menu show-on-small"
onClick=this.showNav><i></i></a>
<Menu className="menu hide-on-small-and-down"/>
<Sidenav ref="sideNav"/>
</div>
</div>
)
}
showNav() {
this.refs.sideNav.show();
}
}
SIDENAV
西德纳夫
class SideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
render() {
if (this.state.open) {
return (
<div className = "sideNav">
This is a sidenav
</div>
)
} else {
return null;
}
}
show() {
this.setState({
open: true
})
}
}
You can see here that we are not toggling classes but using the state of the components to render the SideNav. This way, or similar is the whole premise of using react. If you are using bootstrap, there is a library which integrates bootstrap elements with the react way of doing things, allowing you to use the same elements but set state on them instead of directly manipulating the DOM. It can be found here - https://react-bootstrap.github.io/
您可以在这里看到，我们没有切换类，而是使用组件的状态来呈现 SideNav。这种方式或类似方式是使用 react 的全部前提。如果您正在使用引导程序，则有一个库将引导程序元素与反应的做事方式集成在一起，允许您使用相同的元素但在它们上设置状态，而不是直接操作 DOM。可以在这里找到 - https://react-bootstrap.github.io/
Hope this helps, and enjoy using React!
希望这会有所帮助，并享受使用 React 的乐趣！
回答by Masud Rana
Toggle function in react
反应中的切换功能
At first you should create constructor like this
首先你应该像这样创建构造函数
constructor(props) {
super(props);
this.state = {
close: true,
};
}
Then create a function like this
然后创建一个这样的函数
yourFunction = () => {
this.setState({
close: !this.state.close,
});
};
then use this like
然后像这样使用
render() {
const {close} = this.state;
return (
<Fragment>
<div onClick={() => this.yourFunction()}></div>
<div className={close ? "isYourDefaultClass" : "isYourOnChangeClass"}></div>
</Fragment>
)
}
}
Please give better solutions
请给出更好的解决方案
回答by Tudor Ravoiu
For anybody reading this in 2019, after React 16.8 was released, take a look at the React Hooks. It really simplifies handling states in components. The docs are very well written with an example of exactly what you need.
对于 2019 年在 React 16.8 发布后阅读本文的任何人，请查看React Hooks。它确实简化了组件中状态的处理。这些文档写得非常好，并附有您所需要的示例。
