li元素上的onClick未正确传递目标ID？

Question

I am working on a ReactJS project using MaterialUI. I have following code

{ this.state.categories.map((category, key) => (
      <List>
        <ListItem button id={key} onClick={this.handleClick}>
              <ListItemText primary={category.name} />
              {(category.id === Number(this.state.nestedOpenNum)) ? 
<ExpandLess /> : <ExpandMore />}
        </ListItem>
      </List>
            )

      )}

and state looks something like

this.state = {
  open: false,
  nestedOpen: false,
  nestedOpenNum: 0,
  result: [],
  categories: [{
      id: 0,
      name: "COMPUER SCIENCE",
    }, {
      id: 1,
      name: "BUSINESS",
    }, {
      id: 2,
      name: "ART & HUMANITIES",
    }, {
      id: 3,
      name: "MATH & LOGIC",
    },{
      id: 4,
      name: "SCIENCE",
    }]
};

this is the handleClick function-

handleClick = (e) => {
this.setState({ nestedOpenNum: e.target.id });
this.setState({ nestedOpen: !this.state.nestedOpen });
console.log(e.target.id );

};

PROBLEM

When I click in padding area of li element(green area), everything working perfectly. But e.target.id is not passing when I click on li element(blue area).

how can I solve this?

Answer 1

尝试将onClick处理程序作为道具传递给ListItemText组件，在我看来，该组件正在阻止其他元素检测其onClick处理程序。

Answer 2

I believe you should use currentTarget not target . Look at this https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682