如何在SelectField的onChange方法中获取primaryText属性？

嘿，这个问题我之前也碰到过！想要在SelectField的onChange里拿到对应的primaryText（也就是opt.name），其实有几种简单的办法，我给你列出来：

这是最稳妥的方式——既然你已经有props.options数组，而onChange返回的value就是opt._id，直接用这个_id去数组里找对应的对象，就能轻松拿到name了。

修改你的handleChange方法就行：

handleChange = (event, index, value) => {
  // 根据返回的value（也就是opt._id）找到对应的选项
  const selectedOption = this.props.options.find(opt => opt._id === value);
  if (selectedOption) {
    const primaryText = selectedOption.name;
    // 这里就可以用primaryText做你想要的操作了
    console.log('选中的primaryText:', primaryText);
  }
}

这个方法不需要修改MenuItem的结构，完全依赖现有数据，兼容性也最好。

如果你不想每次都去数组里查找，可以直接把整个opt对象作为MenuItem的value值，这样onChange返回的value就是完整的选项，直接就能取到name。

修改MenuItem的渲染代码：

{props.options.map(opt => {
  return (
    <MenuItem 
      key={opt._id} 
      value={opt}  // 这里把value改成整个对象
      primaryText={opt.name} 
    ></MenuItem>
  );
})}

然后handleChange里直接用：

handleChange = (event, index, value) => {
  const primaryText = value.name;
  console.log('选中的primaryText:', primaryText);
}

不过要注意：如果是较新版本的Material-UI，或者需要做表单提交，对象作为value可能会有序列化问题，这种情况下第一种方法更稳妥。

你可以给MenuItem加一个自定义的data属性，比如data-name，然后在onChange里通过事件对象获取这个值。不过要注意Material-UI的组件是封装过的，event.target可能不是MenuItem本身，所以最好用event.currentTarget或者DOM查找：

修改MenuItem：

{props.options.map(opt => {
  return (
    <MenuItem 
      key={opt._id} 
      value={opt._id} 
      primaryText={opt.name}
      data-name={opt.name}  // 添加自定义数据属性
    ></MenuItem>
  );
})}

然后handleChange：

handleChange = (event) => {
  // 找到对应的MenuItem元素
  const menuItem = event.currentTarget.closest('li');
  if (menuItem) {
    const primaryText = menuItem.dataset.name;
    console.log('选中的primaryText:', primaryText);
  }
}

这个方法适合不想处理数据匹配的场景，但依赖DOM结构，万一Material-UI更新组件结构可能会失效，优先级不如前两种。

内容的提问来源于stack exchange，提问作者PCK