How to change style using javascript in reactjs - Stack Overflow

admin管理员组

文章数量:1289876

How to change style using javascript in reactjs

class Hello extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        document.getElementsByClassName("hello").style.color = 'red';
    }
    render(){
        return (
            <div className="hello" onClick={this.handleClick}>hello</div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

I am getting error

TypeError: Cannot set property 'color' of undefined

How to change style using javascript in reactjs

class Hello extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        document.getElementsByClassName("hello").style.color = 'red';
    }
    render(){
        return (
            <div className="hello" onClick={this.handleClick}>hello</div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

I am getting error

TypeError: Cannot set property 'color' of undefined

• javascript
• reactjs
• typescript

Share Improve this question Follow asked Aug 2, 2018 at 5:47 BiswajitBiswajit 1,03733 gold badges1313 silver badges3131 bronze badges 2

• This can happen if: 1)No elements were found with that class. 2) If an invalid index is used to access the elements in the array. – Aravind S Commented Aug 2, 2018 at 5:55
• The preferable way would be to not mutate DOM yourself, let React take care of it. React does this more efficiently for you. Use the style prop. – hazardous Commented Aug 2, 2018 at 6:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can probably use react way too

class Hello extends Component{
    constructor(props){
        super(props);
        this.state = {
            customColor: {}
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(() => ({ customColor: { color: 'red' } }));
    }

    render(){
        return (
            <div className="hello" style={this.state.customColor} onClick={this.handleClick}>hello</div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

The benefit of doing so is that any ponent created either single or multiple times each of these will have there on set of state and functions and everything. So when I handleclick for one ponent then it will affect the same ponent giving it an isolation.

document.getElementsByClassName returns you the array of selected elements. Hence,

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the plete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names. https://developer.mozilla/en-US/docs/Web/API/Document/getElementsByClassName

In this case, you need to specify the index of the element to be used. Notice, [0] below;

document.getElementsByClassName("hello")[0].style.color = 'red';

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        document.getElementsByClassName("hello")[0].style.color = 'red';
    }
    render(){
        return (
            <div className="hello" onClick={this.handleClick}> hello </div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

---

To work on all the elements with the same class, you need to iterate over the array and change the colors for each.

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      let elms = document.getElementsByClassName("hello");

      for(var i = 0; i < elms.length; i++) {
        elms[i].style.color = 'red';
      }
    }
    
    render(){
        return (
          <div>
            <div className="hello" onClick={this.handleClick}> hello 1 </div>
            <div className="hello" onClick={this.handleClick}> hello 2 </div>
            <div className="hello" onClick={this.handleClick}> hello 3 </div>
          </div>
           
          
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

本文标签： How to change style using javascript in reactjsStack Overflow