web-dev-qa-db-fra.com

Obtenez la valeur du matériel MenuItem ui

J'utilise Material UI pour le menu et l'élément de menu. J'essaie d'obtenir la valeur d'un élément de menu, mais cela ne fonctionne pas.

Voici mon code:

<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)
}

Je n'obtiens pas la valeur, et dans la console du navigateur j'ai un objet.

Pouvez-vous m'aider?

Je vous remercie

reactjsmaterial-ui
6
Anaïs Saez

Utilisez un data-attribute sur l'élément de menu et accédez-y à partir du currentTarget de l'événement click. Notez que data-my-value l'attribut devient myValue le event.currentTarget.dataset.

const handleClick = event => {
    const { myValue } = event.currentTarget.dataset;
    console.log(myValue) // --> 123
}

<MenuItem
    data-my-value={123}
    onClick={handleClick}
>
    <div>text</div>
</MenuItem>

Pourquoi currentTarget au lieu de target? Le currentTarget fait référence à l'élément que l'écouteur d'événements est directement attaché à tandis que le target fait référence à l'élément spécifique dans MenuItem, tel que certains div, sur lequel on clique. Ce div n'a pas le data-my-value et en tant que tel, le target n'aurait pas myValue sur son dataset. Utilisez donc currentTarget dans ce cas.

Connexes: Comment accéder aux attributs personnalisés de l'objet événement dans React?

5
Christiaan Westerbeek

Le menu n'a pas onChange défini dans l'API et cela n'a pas fonctionné pour moi car il n'est jamais appelé. Ce qui fonctionne pour moi, c'est une mauvaise solution:

<MenuItem onClick={this.handleClose.bind(this, 'valueHere')}>Text here</MenuItem>

5
Hernan

J'ai utilisé NativeEvent et cela fonctionne pour moi.

handleClose = (ev) => {
        this.setState({
            anchorEl: null
        });
        console.log(ev.nativeEvent.target.outerText);
    };

Essayez comme ça s'il vous plaît.

3
Elman Huseynov

Dans le composant Material UI Menu, les fonctions de tir lors de la sélection d'un élément de menu sont mieux effectuées avec le gestionnaire onChange du composant parent Menu au lieu des gestionnaires onClick. pour chaque article séparé. La signature du rappel onChange est function(event: object, value: any) => void, vous pouvez donc donner à chacun de vos MenuItem un accessoire value séparé, et ce sera disponible en tant que deuxième argument de votre gestionnaire onChange. Comme ça:

<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)
}
2
Waiski

Utilisez une fonctionnalité en JavaScript appelée curry

C'est dans le menu

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

C'est dans le gestionnaire

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

Ensuite, vous verriez quelque chose comme ci-dessous dans la console JavaScript

=> closeDrawer key ProductPage
2
iwan

Vous pouvez également obtenir la valeur comme celle-ci

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

puis onClickButton comme ceci

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

Ajoutez un attribut 'value' au composant MenuItem. Utilisez ensuite la fonction getAttribute () pour obtenir la valeur de l'attribut 'value'. Voici un exemple ...

const someMenu = () => {
    const [element, setElement] = React.useState(null)

    const handleClose = event => {
       setElement(null)

       // grab the value of the "value" attribute here
       console.log(event.target.getAttribute("value")
    }

    const handleClick = event => {
       setElement(event.currentTarget)
    }

    return(
        <Menu anchorEl={element} keepMounted open={Boolean(element)}>
            <MenuItem value="foo" onClick={handle} />
        </Menu>
    )
}
0
Rashid Mincan

Le paramètre transmis au gestionnaire onClick est un event et non un value. Vous devez extraire le value de l'événement.

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

Déplacez également le console.log comme rappel, de cette façon, il n'est appelé qu'après que la modification state a eu lieu.

0
mrinalmech

onClick n'est pas spécifié comme propriété pour MenuItem, vous pouvez mettre un onChange sur Menu et obtenir la valeur de l'élément sélectionné comme

  <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)})
        }
0
Shubham Khatri