Material-UI:未调用ListItem onClick [英] Material-UI: ListItem onClick not called

问题描述

我正在使用React和Material-UI.我试图显示一个列表，并在单击列表中的一项时调用一个函数.下面的代码是我的代码的简化版本，但其中应包含与此问题有关的所有行.显然从未调用过onClick函数.我想念什么?

I am working with React and Material-UI. I am trying to display a list and call a function when one of the items of the list is clicked. The code below is a simplified version of my code, but it should contain all the lines concerning the issue. The onClick function is apparently never called. What am I missing?

App.js:

import React, { Component } from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import Map from './Map.js';

class App extends Component {

  render() {

    return (
      <div >
      <Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={9}>
            <Map/>
        </Grid>

      </Grid>
      </div>

    );
  }
}

export default App;

Map.js:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';


class Map extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      sensorsList: {
        isLoaded: false,
        data: null,
      },
    };
  }

  componentDidMount() {
    // retrieve list of sensors
    fetch("https://api-of-things.plenar.io/api/sensors?size=10000")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            sensorsList: {
              isLoaded: true,
              data: Object.keys(result.data).map(key => result.data[key].path),
            }
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            error
          });
        }
      )
  }

  selectSensor(name) {
    console.log(name);
  }

  _renderSensorsList() {
    const {sensorsList} = this.state;

    return sensorsList.isLoaded && (
      <div style={{
        position: 'absolute', 
        zIndex: 1, 
        pointerEvents: 'none', 
        right: 10, 
        top: 10,
        backgroundColor: 'white',
        }}>

      <List component="nav">
        { sensorsList.data.map(key => 
          <ListItem button key={key} onClick={() => this.selectSensor("ciao")} >
            <ListItemText primary={key} />
          </ListItem>
        )}
      </List>

      </div>
    );
  }

  render() {
    const {sensorsList, selectedSensor} = this.state;

    return (
      <div>
        { this._renderSensorsList() }
      </div>
    );
  }
}

export default Map;

推荐答案

问题是，您以div的样式设置了 pointerEvents:'none'，从而阻止了单击以到达DOM事件侦听器，将其删除即可.

The problem is that in your div's style you are setting pointerEvents: 'none', preventing the click to reach the DOM event listener, remove it and it will work.

<div style={{
        position: 'absolute', 
        zIndex: 1, 
        pointerEvents: 'none', //<---- remove this line
        right: 10, 
        top: 10,
        backgroundColor: 'white',
}}>

这篇关于Material-UI:未调用ListItem onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！