3

モバイル デバイス用の長いナビゲーション バーを作成しようとしていますが、アコーディオン スタイルで開発しています。最初のビューには、現在アクティブなリンク名があります。ユーザーがこのアクティブなリンク名をクリックすると、下に展開され、他の使用可能なリンクが一覧表示されます。

React.createClass({
    getInitialState: function() {
        return {
          tab: false,
          navState: "nav-closed"
        }
      },
      handleClick: function() {
        if (this.state.tab) {
          this.setState({
            tab: false,
            navState: "nav-closed"
          })
        } else {
          this.setState({
            tab: true,
            navState: "nav-open"
          })
        }
      },
      render: function() {
        return (<div>
        <div className ="navbar-container">
        <div onClick = {this.handleClick}>HEADER` 
          /*  (should display active element name here) */
        </div>
        <div className = {this.state.navState}>
        <ul role="nav">
              <li onClick = {this.handleClick}><Link activeClassName="active" to="path1">PATH 1</Link></li>
              <li onClick = {this.handleClick}><Link activeClassName="active" to="/path2">PATH 2</Link></li>
            </ul>
        </div>
        </div>
            {this.props.children}
      </div>)
      }
    })

コード サンプルでは、​​「HEADER」の代わりに現在アクティブなリンク (PATH1 または PATH2) を取得しようとしています。

私が調べるべきことについて何か提案やアドバイスはありますか?

4

3 に答える 3

2

メソッドcurrentTarget.interHtmlに引数として渡されたイベント オブジェクトのプロパティにアクセスすることで、クリックされたリンクのテキストを取得できます。handleClick

handleClick: function(e) {
  console.log(e.currentTarget.innerHTML); // should log PATH 1 or PATH 2
  //...
}

だから私は次のようなアドバイスをすることができます：

React.createClass({
  getInitialState: function() {
    return {
      heder: '',
      tab: false,
      navState: "nav-closed"
    }
  },
  handleClick: function(e) {
    let header = e.currentTarget.innerHTML;
    if (this.state.tab) {
      this.setState({
        tab: false,
        navState: "nav-closed",
        header
      })
    } else {
      this.setState({
        tab: true,
        navState: "nav-open",
        header
      })
    }
  },
  render: function() {
    return (<div>
    <div className ="navbar-container">
    <div onClick = {this.handleClick}>{this.state.header}
    </div>
    <div className = {this.state.navState}>
    <ul role="nav">
          <li onClick = {this.handleClick}><Link activeClassName="active" to="path1">PATH 1</Link></li>
          <li onClick = {this.handleClick}><Link activeClassName="active" to="/path2">PATH 2</Link></li>
        </ul>
    </div>
    </div>
        {this.props.children}
  </div>)
  }
})
于 2016-07-05T18:46:37.527 に答える
1

あなたの質問を正しく理解しているかどうかわかりません。クリック ハンドラーにキャプション引数を追加することを検討してください。

React.createClass({
    getInitialState: function() {
        return {
          tab: false,
          navState: "nav-closed",
          caption: ''
        }
      },
      handleClick: function(caption) {
        if (this.state.tab) {
          this.setState({
            tab: false,
            navState: "nav-closed",
            caption
          })
        } else {
          this.setState({
            tab: true,
            navState: "nav-open",
            caption
          })
        }
      },
      render: function() {
        return (<div>
        <div className ="navbar-container">
        <div onClick ={() => this.handleClick(this.state.caption)}>{this.state.caption}
        </div>
        <div className = {this.state.navState}>
        <ul role="nav">
              <li onClick = {() => this.handleClick('PATH 1')}><Link activeClassName="active" to="path1">PATH 1</Link></li>
              <li onClick = {() => this.handleClick('PATH 2')}><Link activeClassName="active" to="/path2">PATH 2</Link></li>
            </ul>
        </div>
        </div>
            {this.props.children}
      </div>)
      }
    })

または、コンポーネントの状態に配列を追加linksし、その値に基づいてすべてのリンクを生成することをお勧めします。 

 <ul role="nav">
    {this.state.links.map(link => (
      <li key={link.to} onClick={() => this.handleClick(link.caption)}>
          <Link ... to={link.to} >{link.caption}</Link>
      </li>
    ))}
 </ul>
于 2016-07-05T18:53:05.870 に答える
-1

要素のクラス（または属性）を切り替える前に、イベントでターゲットへのクリックを処理します。この例を確認してください。

const NavBar = React.createClass({
  handleClick(e){
    let nav = document.querySelectorAll('#nav li')
    Array.from(nav).map(list =>{
      list.classList.toggle('active', false)
    })
    e.target.classList.toggle('active', true)
    
    let getActiveLink = document.querySelector('.active')
    console.log(getActiveLink.innerText)
  },
  render(){
    return(<ul id='nav'>
             <li onClick={ this.handleClick }>Link one</li>
             <li onClick={ this.handleClick }>Link two</li>
             <li onClick={ this.handleClick }>Link tree</li>
           </ul>)
  }
})
   
ReactDOM.render(<NavBar/>, document.getElementById('foo'))
<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='foo'><div>

于 2016-07-05T18:55:30.937 に答える