Reactjs 按钮'；s onClick不返回id

单击组件时，我试图读取组件的

id

：

const FlagsDialog = (props) => {
  const {
    classes,
    handleClose,
    showFlagsDialog,
  } = props;

  const selectLang = (evt) => {
    console.log('CLICKED', evt.target.id);
  };

  return (
    <Dialog
      open={showFlagsDialog}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <Button onClick={selectLang} id="en">English</Button>
      <Button onClick={selectLang} id="es">Spanish</Button>
      <Button onClick={selectLang} id="fr">French</Button>
      <Button onClick={selectLang} id="de">German</Button>
    </Dialog>
  );
};

const FlagsDialog=（道具）=>{
常数{
班级，
手镯，
showFlagsDialog，
}=道具；
const selectLang=（evt）=>{
console.log（'CLICKED'，evt.target.id）；
};
返回(
英语
西班牙的
法语
德国的
);
};

---

但运行时，单击只返回文本

单击的

，而单击按钮的

id

没有值。我做错了什么？

我不知道你想做什么，但代码是有效的

我认为

按钮

和

对话框

是您的自定义组件（如果不是，您需要将它们更改为

按钮

和

对话框

）。我在我使用的代码中将它们更改为

按钮

和

对话框

，效果很好

在这里，请查看：

---

使用方法而不是事件来传递id作为参数

 const FlagsDialog = (props) => {
      const {
        classes,
        handleClose,
        showFlagsDialog,
      } = props;

      const selectLang = (id) => {
        console.log(id);
//OR e.target.getAttribute("id")
      };

      return (
        <Dialog
          open={showFlagsDialog}
          onClose={handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <Button onClick={() => this.selectLang(id)} id="en">English</Button>
          <Button onClick={selectLang} id="en">English</Button>
        </Dialog>
      );
    };

const FlagsDialog=（道具）=>{
常数{
班级，
手镯，
showFlagsDialog，
}=道具；
const selectLang=（id）=>{
console.log（id）；
//或e.target.getAttribute（“id”）
};
返回(
this.selectLang（id）}id=“en”>英语
英语
);
};

或者，您可以使用fancy pant ref功能：

class App extends React.Component {
  btns = [];

  handleClick = index => console.log(this.btns[index].id);

  render() {
    return (
      <div>
        <button
          ref={ref => (this.btns[0] = ref)}
          onClick={() => this.handleClick(0)}
          id="no1"
        >
          First
        </button>
        <button
          ref={ref => (this.btns[1] = ref)}
          onClick={() => this.handleClick(1)}
          id="no2"
        >
          Second
        </button>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
基站=[]；
handleClick=index=>console.log（this.btns[index].id）；
render（）{
返回(
（this.btns[0]=ref）}
onClick={（）=>this.handleClick（0）}
id=“no1”
>
弗斯特
（this.btns[1]=ref）}
onClick={（）=>this.handleClick（1）}
id=“no2”
>
第二
);
}
}

---

事实证明，这个ref实现比我预期的要简单。

问题在于

按钮

，因此您需要分享它。如果您使用

按钮

它将按预期工作