Question

如何在reactjs中使用javascript更改样式

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')
);

我遇到错误

TypeError：无法设置未定义的属性“颜色”

Answer 1

您可能也可以使用反应方式

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')
);

这样做的好处是，一次或多次创建的任何组件都将具有一组状态，功能以及所有内容。因此，当我为一个组件处理click时，它将影响同一个组件，从而使其隔离。

Answer 2

document.getElementsByClassName 返回您所选元素的数组。因此，

返回具有所有给定类名称的所有子元素的类似数组的对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）；它只会返回具有给定类名的指定根元素的后代元素。 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

在这种情况下，您需要指定要使用的元素的索引。请注意，下面的[0]；

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

要处理具有相同类的所有元素，您需要遍历数组并更改每个元素的颜色。

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

如何在ReactJS中使用JavaScript更改样式

2 个答案: