通过材质ui ListItemText 组件访问值

【问题标题】：Accessing value through material ui ListItemText component通过材质ui ListItemText 组件访问值
【发布时间】：2021-06-15 10:48:16
【问题描述】：

我有材料 ui 组件，例如：

                  <ListItemText onClick={(ev) => onAreaSelect(ev)} primary={area} />
                </ListItem>

然后：

  const onAreaSelect = (event) => {
      console.log("area seledcted??", event.target, event.target.value)
  }

event.target 返回：

<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"> Area </span>

但是event.target.value 返回：

undefined

如何访问该值？

【问题讨论】：

【解决方案1】：

useRef()which 将保存您将 ref 字段放入的元素的值，如下所示：

    const areaRef = useREf(null)
    .
    .
    <ListItemText ref = {areaRef} onClick={(ev) => onAreaSelect(ev)} 
   primary={area} />

onChange() 有两个参数：事件和值，所以你可以这样做：
```
  onChange((event,value)=>onAreaSelect(event,value))
```

【讨论】：