e.currentTarget 用于材质 ui 按钮

Question

• 我有三个选项卡和三个按钮。
• 当我选择一个按钮时，它应该显示第一个按钮被选中
• 当我选择第二个按钮时，它应该显示第二个按钮被选中
• 其他按钮也是如此。
• 我尝试使用 e.currentTarget 实现但没有成功。
• 能否告诉我如何修复它。
• 在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/material-demo-c4f5u

class SimpleTabs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedButton: false,
      value: 0
    };
  }

  handleChange = (event, newValue) => {
    this.setState({
      value: newValue
    });
  };

  selectButton = e => {
    console.log("selectButton--->", e.currentTarget);
    console.dir("selectButton--->", e.currentTarget);
    const selectedButtonTarget = e.currentTarget;

    this.setState({ selectedButton: true });
  };
  renderButtonSelection = () => {
    if (this.state.selectedButton === true) {
      return (
        <div>
          <div>no button selected</div>
          <div>first button selected</div>
          <div>second button selected</div>
          <div>third button selected</div>
        </div>
      );
    }
  };

  render() {
    //const classes = useStyles();
    const { classes } = this.props;
    //  const [value, setValue] = React.useState(0);

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={this.state.value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <TabContainer>
            Item One
            <Button onClick={this.selectButton}>button one</Button>
          </TabContainer>
        )}
        {this.state.value === 1 && (
          <TabContainer>
            Item Two <Button onClick={this.selectButton}>button two</Button>
          </TabContainer>
        )}
        {this.state.value === 2 && (
          <TabContainer>
            Item Three <Button onClick={this.selectButton}>button three</Button>
          </TabContainer>
        )}

        {this.renderButtonSelection()}
      </div>
    );
  }
}

export default withStyles(styles)(SimpleTabs);

Answer 1

希望这是您正在寻找的：

将 selectButton 和 renderButtonSelection 方法替换为以下内容：

getNumStr = n => {
    switch (n) {
    case 1:
        return "one";
    case 2:
        return "two";
    case 3:
        return "three";
    default:
        return "";
    }
};

selectButton = e => {
  const selectedButtonTarget = this.state.value + 1;
  this.setState({ selectedButton: selectedButtonTarget });
};

renderButtonSelection = () => {
  if (this.state.selectedButton) {
    return <div>button {this.getNumStr(this.state.selectedButton)} selected</div>;
  }
  return null;
};

https://codesandbox.io/s/material-demo-c4mnj