I have create a React Component using the following code. In this i am creating tab and added the class and storing its reference to in a global namespace Interface for further processing.
var TabBody = React.createClass({
getInitialState: function() {
return {
class: 'tabBody tab activeTab'
}
},
render: function() {
Interfaces.tabBody = this;
tabSelectionInfo.tabBody = this;
return (
React.createElement('div', {
className: this.state.class,
onClick: handleTabClick
},
React.createElement('span', {}, "Body"))
);
}
});
now using the following function, To add a class to the above component and console is showing an error undefined. how i store the refrance of this component in order to change its class later.
handleTabClick = function() {
Interfaces.tabBody.classList.add('tabPreviewComplete');
}
Toggling the class To toggle a class, we need to use the boolean value in the ternary expression. If the boolean value is true class name is added to the react element. If the boolean value is false class name is removed from the react element.
toggle() The toggle() button is used for toggling classes to the element. It means adding a new class or removing the existing classes.
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list. Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className .
As you have specified in your code that your class name is used using a state variable named 'class' containing the value 'tabBody tab activeTab'
className: this.state.class,
Thats why you must have to use setState() method to change your className. As you have the reference to your class instance in global namespace named 'Interface.tabBody' which can be used to set your className by calling setState() e.g
Interface.tabBody.setState({class: 'tabBody tab activeTab disabled'});
This method is used when you want to access class instance outside of the React.
if you are using handleclick() in your react then you can use the following code
handleTabClick = function() {
this.setState({class: 'tabBody tab activeTab disabled'});
}
By calling setState() the React will detect changes and re-renders component.
Above 16.8, using useRef hooks for functional components,
// useRef takes initialValue as param
const fooBarRef = useRef(null);
//DOM Usage
<div className="foo" ref={fooBarRef}>Hello</div>
Usage of reference for useRef after mounting node element,
//Getting node element
const fooBarNode = fooBarRef.current
//Adding class to node element
fooBarNode.classList.add('bar');
Above 16.3, using createRef for class components,
// Creating ref in a constructor
this.fooBarRef = React.createRef();
// DOM usage
<div className="foo" ref={this.fooBarRef}>Hello</div>
Usage of reference for createRef after mounting node element,
//Getting node element
const fooBarNode = this.fooBarRef.current
//Adding class to node element
fooBarNode.classList.add('bar');
Below 16.3, using callBackRef,
// Creating ref in a constructor
this.fooBarRef = null;
this.setFooBarRef = (ref) => {
this.fooBarRef = ref;
}
// DOM usage
<div className="foo" ref={this.setFooBarRef}>Hello</div>
Usage of reference after mounting node element,
//Adding class name
this.fooBarRef.classList.add('bar');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With