Question

所以我有一个像const divs = ["Text 1","Text 2","Text 3"]这样的数组。我在渲染函数

中从这个数组创建div（一个小菜单）

var createThreeDivs = divs.map((category) => {
        return <div key={category} onClick={this.handleClick} className="myDivClass">{category}</div>
});

我想在点击它们时设置其中一个div，并删除其余部分的样式。因此，当我选择其中一个div时，它会获得一种颜色并删除其余部分的颜色

在没有虚拟DOM的普通javascript中我可以这样做：

handleClick(e) {

    //remove styling from others
    var allDivs = document.getElementsByClassName("myDivClass");
    for(var i = 0; i < allDivslength; i++) {
        allDivs[i].classList.remove("myDivClass-styled");
    }

    //Add styling class to selected,
    e.target.classList.add("myDivClass-styled");

}

但是这会直接操纵DOM。我如何在React中做这样的事情？

我已经看到了如何使用只有一个元素的状态以及没有创建div的数组来完成此操作的示例。但我无法为这种情况提出一个好的解决方案。有什么建议吗？

Answer 1

使用组件的状态，您可以根据活动的div更新颜色。当用户点击时更新活动div的索引，当索引等于点击的div时，更新该div的颜色。

见下面的例子。

class Example extends React.Component {
  
  constructor(props) {
    super(props);

    this.state = { 
       active: 0 
    };

  }
    
  render() {
    
    const divs = ["Text 1", "Text 2", "Text 3"];
    
    const updateActiveDiv = (value) => {

       this.setState(() => {
           //this line will reset the value to 
           //null if same element is clicked twice
           if(value === this.state.active) {
             value = null;
           };

           return {
             active: value
           }
    
      });

    };
    
    let divText = divs.map((div, i) => {

      let color = this.state.active === i ? 'red' : 'black';
      return <div style={{ color }} onClick={() => updateActiveDiv(i)}>{div}</div>;
      
    });

    return (
       <div>
         { divText }
       </div>
    );
  }
}
    
ReactDOM.render(<Example />, 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>

Answer 2

Pass current text from html
 handleClick = (text)=>{
this.setState({activeText:text})
}

Inside create div function add class dynamically 

Div className = { stat condition ? Class : no class }

在React中使用数组onClick创建的样式div

2 个答案: