react求助一个问题

发布于
2018-02-06

更新于
2018-02-06

实现效果是一个菜单栏的点击时展开子集菜单，再点击缩起。
而且不止一个菜单。

代码：

//点击事件
 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名字来实现，但是这样我得拿到真实的dom，所以我想通过ref来拿到当前点击的dom，再通过它去找兄弟节点'blockList'，给它添加class。

这里我用index来标记不同的ref。

class名为‘blockList ’的是需要展开项**

问题：在点击方法里我该怎么去拿到拼接了下标标量的ref值，或者有什么更好的方法来实现这个效果？

react javascript

阅读 2.3k

4 个回答

yszou

✓ 已被采纳

<!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>