獲得價值

我使用的材質爲UI菜單和菜單項我試圖讓菜單項的值，但它不工作..獲得價值

這是我的代碼：

  <Menu value= { this.state.selectedItem }> 
       <MenuItem onClick={this.listClicked} leftIcon={ 
        <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>format_list_bulleted</FontIcon> 
       } />  

       <MenuItem onClick={this.settingClicked} leftIcon={ 
        <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>settings</FontIcon> 
       } /> 

      </Menu> 

public listClicked = (value) => { 
     this.setState({ 
      selectedItem :value 
     }) 
     console.log(this.state.selectedItem) 
    }

我不明白的價值，並在導航器的控制檯，我有一個對象你能幫助我嗎？

謝謝

來源

2017-05-09 Anaïs Saez

傳遞到onClick處理程序是一個event不是value參數。你必須從事件中提取value。

public listClicked = (event) => { 
     this.setState({ 
      selectedItem :event.target.value 
     },()=>{ 
     console.log(this.state.selectedItem) 
     }) 
    }

而且移動console.log作爲回調因爲這樣，它被稱爲state改變已經發生之後。

來源

2017-05-09 13:23:30 mrinalmech

在材質UI Menu組件，選擇菜單項時發射功能，最好與onChange處理器父Menu組件，而不是onClick處理每個單獨的項目來完成。 onChange回調的簽名是function(event: object, value: any) => void，因此您可以爲每個MenuItem單獨提供一個value prop，這將作爲onChange處理程序中的第二個參數。就像這樣：

<Menu value= { this.state.selectedItem } onChange={ this.menuClicked }> 
    <MenuItem value="list" leftIcon={ 
    <FontIcon className="material-icons">format_list_bulleted</FontIcon> 
    } />  
    <MenuItem value="settings" leftIcon={ 
    <FontIcon className="material-icons">settings</FontIcon> 
    } /> 
</Menu>

...

public menuClicked = (event, value) => { 
    this.setState({ 
    selectedItem: value 
    }) 
    console.log(this.state.selectedItem) 
}

來源

2017-05-09 13:23:42 Waiski

謝謝你，但像@Shubham卡特里的答案，我在我的控制檯中的空值，或undifined ..我不明白.. –

你確定你在'MenuItem'中加了'value'屬性嗎？ – Waiski

是的，我確定.. –

的onClick沒有被指定爲菜單項的屬性，你可以把一個Menu的onChange並獲得所選項目的價值像

<Menu value= { this.state.selectedItem } onChange={this.selectedItem} 
      <MenuItem leftIcon={ 
       <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>format_list_bulleted</FontIcon> 
      } />  

      <MenuItem leftIcon={ 
       <FontIcon className="material-icons" style={{ color: 'white', margin: '0' }}>settings</FontIcon> 
      } /> 

     </Menu> 


     selectedItem=(e, value)=> { 
      this.setState({ 
       selectedItem :value 
      },() => {console.log(this.state.selectedItem)}) 
     }

來源

2017-05-09 13:24:05

如果你仍然想使用onClickClick menuItem看到@mrinalmech回答 –

嗨，謝謝你的anwer，我試着你的解決方案，但它不工作。在導航器的控制檯中，我有一個「未定義的」..一個想法？謝謝 –

你是否在與菜單相同的組件中寫入selectedItem函數 –

你也可以得到這樣的值

<MenuItem key={menu.id} primaryText={menuItem.name} onClick = {this.onClickButton} menuItems = {this.subMenu(menuItem.children)}/>

然後onClickButton這樣

onClickButton = (ev) => { 
     if(ev.target.innerText === 'light') { // light is the value of menuitem in string 
     this.props.dispatch(changeTheme('light')) 
     } 
    }

來源

2017-10-09 09:17:56

使用功能，在JavaScript中叫curry

這是菜單

<MenuItem onClick={this.closeDrawer("ProductPage")}> 
     Products 
</MenuItem>

這是處理

closeDrawer = key => event => { 
    console.log("=> closeDrawer key", key); 
    this.setState({ open: false }); 
    };

那麼你會看到類似下面的JavaScript控制檯

=> closeDrawer key ProductPage

來源

2018-01-20 03:05:12 iwan

回答

相關問題