要通過ID也是這樣做e.preventdefault在反應終極版

-1

   `import React, { Component, PropTypes } from 'react'; 
        import { connect } from 'react-redux'; 
        import { itemsFetchData,toggleDiv } from 
         '../actions/sidenavaction'; 

       class SideNavItem extends Component { 
        componentDidMount() { 
       this.props.fetchData 
        ('http://58f5d2ccc9deb71200ceecef.mockapi.io/nav'); 
         } 


        render() { 

         var Nest=function(par) { 
          const numbers = par.itemized; 
          const listItems = numbers.map((number) => <li 
         key={number.sid}>{number.svalue}</li>); 
       return (<ul>{listItems}</ul>); 
        }; 



      if (this.props.hasErrored) { 
     return <p>Sorry! There was an error loading the items</p>; 
        } 

       if (this.props.isLoading) { 
     return <p>Loading…</p>; 
      } 

       return (
       <ul>{this.props.items.map((item) =>   
     <ul key={item.id} onClick= 
      {this.props.toggleDiv.bind(this,item.id)}><a href="#"> 
      {item.value}</a> 
      {item.sub && <div style={{display: this.props.hidden ? 'block' : 
      'none'}}><Nest itemized={item.sub} /></div>}   
       </ul>    
       )} 
        </ul> 
      );   
     } 
     } 

       const mapStateToProps = (state) => { 
      return { 
      items: state.items, 
     hasErrored: state.itemsHasErrored, 
      isLoading: state.itemsIsLoading, 
     hidden:state.toggleDivReducer.hidden 
        }; 
      }; 

        const mapDispatchToProps = (dispatch) => { 
       return { 
        fetchData: (url) => dispatch(itemsFetchData(url)), 
       toggleDiv: (id) => dispatch(toggleDiv(id)) 
     }; 
      }; 

       export default connect(mapStateToProps, mapDispatchToProps) 
       (SideNavItem);`

我能夠通過ID，以我的行動mapdispatchtoprops也是我想的onclick只在我點擊，也是我的元素被解僱已經實現切換，但在何處應用隱藏的道具，因爲當我加載列表中沒有隱藏嵌套的名單，但在點擊鏈接，我能撥動他們Onload the nested links are also visible whereas it should be hidden 要通過ID也是這樣做e.preventdefault在反應終極版

行動 `導出功能toggleDiv（ID）{ return { type：'TOGGLE_DIV'， id：id

     }; 
         }`

減速 `導出功能toggleDivReducer（狀態= {隱藏：真}，動作）{ 開關（action.type）{

      case 'TOGGLE_DIV': 
         return Object.assign({}, state, {hidden: 
         !state.hidden}); 

          default: 
         return state; 

          } 

          }

來源

2017-04-20 Enthu

的onClick = {this.props.toggleDiv.bind（這一點，item.id）}，我怎麼能寫一個函數來做到事件preventdefault，也傳遞id到我的mapdispatchtoprops，也是我的切換不按預期工作，我的意思是在加載時，嵌套值也顯示出來，但當我切換然後它隱藏，但也適用於所有的鏈接 – Enthu

確定我能夠理解爲什麼onClick被應用，因爲我已經在地圖函數中給出了它，但任何人都可以幫助我，我應該在哪裏放置onClick，以便它只適用於單擊的元素pon – Enthu

enter image description here其實我的理解是錯誤的我想，當我使用隱藏的道具然後加載它的作品，但我的點擊事件適用於所有鏈接。切換不按預期工作。我更新的代碼

render() { 
    var Nest = function(par,leme) { 
    const numbers = par.itemized; 
    const listItems = numbers.map((number) => <li key={number.sid}>{number.svalue}</li>); 

    return (<ul>{listItems}</ul>); 
    }; 

    if (this.props.hasErrored) { 
    return <p>Sorry! There was an error loading the items</p>; 
    } 

    if (this.props.isLoading) { 
    return <p>Loading…</p>; 
    } 

    return (
    <ul> 
     {this.props.items.map((item) =>   
     <li key={item.id} onClick={this.props.toggleDiv.bind(this,item.id)}> 
      <a href="#">{item.value}</a> 
      {item.sub && <div hidden={this.props.hidden}><Nest itemized={item.sub} /></div>}   
     </li> 
    )} 
    </ul> 
);   
}

的點擊被解僱了兩個導航

來源

2017-04-20 10:53:59 Enthu

好的我能夠理解爲什麼onClick會被應用，因爲我已經在map函數中給出了它，但是任何人都可以幫助我，我應該在哪裏放置onClick，以便它僅適用於單擊的元素 – Enthu

要通過ID也是這樣做e.preventdefault在反應終極版

回答

相關問題