react求助一個問題

實現(xiàn)效果是一個菜單欄的點擊時展開子集菜單，再點擊縮起。
而且不止一個菜單。

代碼：

//點擊事件
 clickFunc = (index) => {
       
    }
    
// render...  
 {
                            list.map((item, index) => {
                                return (
                                    <div key={index} className="menuBlock">
                                        <div className="blockTitle" onClick={this.clickFunc.bind(this, index)} ref={'block'+index}>{item.blockTitle}</div>
                                        <div className='blockList on' >
                                            <ul>
                                                {
                                                    item.arr.map((item, index) => {
                                                        return (
                                                            <li key={index}><a href={item.link} target="_blank">{item.text}</a></li>
                                                        );
                                                    })
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                )
                            })
                        }

**目前我是打算通過增刪class名字來實現(xiàn)，但是這樣我得拿到真實的dom，所以我想通過ref來拿到當(dāng)前點擊的dom，再通過它去找兄弟節(jié)點'blockList'，給它添加class。

這里我用index來標(biāo)記不同的ref。

class名為‘blockList ’的是需要展開項**

問題：在點擊方法里我該怎么去拿到拼接了下標(biāo)標(biāo)量的ref值，或者有什么更好的方法來實現(xiàn)這個效果？

回答

編輯回答

久愛她

onClick={this.clickFunc.bind(this, index)}
你已經(jīng)將index傳到點擊方法里了，直接用就可以了呀。
在點擊方法里寫 this.refs['block'+index]就可以拿到當(dāng)前點擊的DOM元素了

2017年7月30日 18:50

編輯回答

逗婦惱

你現(xiàn)在寫的是React，不是寫Jquery， React在頁面渲染之前都是虛擬的DOM，一般在走投無路實在沒辦法之前盡量不要去操作什么DOM, 都是通過狀態(tài)值的改變?nèi)ヤ秩拘碌捻撁嬖?。要學(xué)react，盡快拋棄這種jqury的思想。
其實，你這個問題很簡單，用一個狀態(tài)值來標(biāo)識當(dāng)前哪個菜單項展開

2017年3月25日 17:54

編輯回答

久礙你

盡量通過改變數(shù)據(jù)來觸發(fā)渲染

2017年4月17日 06:07

編輯回答

玩控

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React</title>
<script crossorigin src="https://s.zys.me/js/react/react.min.js"></script>
<script crossorigin src="https://s.zys.me/js/react/react-dom.min.js"></script>
<script crossorigin src="https://s.zys.me/js/react/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">

    class TreeNode extends React.Component {
      constructor(props){
        super(props);
        this.state = {status: props.data.status};
      }
      close(){
        this.setState({status: 'close'})
      }
      open(){
        this.setState({status: 'open'})
      }
      genChildren(){
        if(this.state.status === 'close'){return null}
        return this.props.data.children.map( o => <TreeNode data={o} />);
      }
      genName(){
        return <span>{this.props.data.name}</span>
      }
      genIcon(){
        if(this.state.status === 'open'){ return <span onClick={this.close.bind(this)}>-</span>}
        return <span onClick={this.open.bind(this)}>+</span>
      }
      render(){
        return (
          <div style={{marginLeft: 20}}>
            {this.genIcon()}
            {this.genName()}
            {this.genChildren()}
          </div>
        );
      }
    }

    class Tree extends React.Component {
      genTree(){
        const data = [
          {
            name: '第一個', status: 'open', children: [
              {name: '名字', status: 'close', children: [
                {name: '名字', status: 'close', children: []},
                {name: '名字', status: 'close', children: []},
                {name: '名字', status: 'close', children: []}
              ]},
              {name: '名字', status: 'close', children: []},
              {name: '名字', status: 'close', children: []},
              {name: '名字', status: 'close', children: []}
            ]
          }
        ]
        return data.map( o => <TreeNode data={o} />);
      }

      render(){
        return <div>{this.genTree()}</div>
      }
    }


    ReactDOM.render(<Tree />, document.getElementById('app'));
  </script>
</body>
</html>

2018年1月13日 00:40