Question

我正在尝试点击id组件的<Button />：

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>
  );
};

但是运行时，单击仅返回文本CLICKED，而单击按钮的id没有值。我在做什么错了？

Answer 1

我不知道您要做什么，但是该代码有效。

我正在candiates和Button是您的自定义组件（如果不是，则需要将它们更改为Dialog和button）。我在我使用的代码中将它们分别更改为dialog和button，并且效果很好。

在这里，检查一下：

Answer 2

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

None

Answer 3

或者，您也可以使用fant-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>
    );
  }
}

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

按钮的onClick不返回ID

3 个答案: