Блог

Я работаю с React и Material-UI. Я пытаюсь отобразить список и вызвать функцию при нажатии на один из элементов списка. Приведенный ниже код является упрощенной версией моего кода, но он должен содержать все строки, касающиеся проблемы. Функция onClick, по-видимому, никогда не вызывалась. Чего мне не хватает?

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 amp;amp; (
      <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, удалите его, и он заработает.

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

попробуйте заменить это

   _renderSensorsList() {
  

с функцией стрелки, подобной этой

   _renderSensorsList = () => {