问绑定this -调用delete项
EN

Stack Overflow用户

提问于 2019-09-30 09:49:56

回答 1查看 52关注 0票数 1

我想请更多有经验的大学同学帮助理解下面的代码，并使其在我的应用程序中工作。

一般目标是从我的按钮调用REDUX操作，该操作将从数据库中删除一项。

下面是一段适用于我的代码：

  <MenuItem onClick={this.props.deleteTrip.bind(this, trip.id)}>
      deleteTrip
  </MenuItem>

下面的代码是这个文件的一部分：

class Trips extends Component {
  state = {
    anchorEl: null,
    dialogOpen: false
  };

  //integracja z reduxem
  static propTypes = {
    trips: PropTypes.array.isRequired
  };

  //

  handleClose = () => {
    this.setState({
      anchorEl: null
    });
  };

  handleClick = event => {
    this.setState({
      anchorEl: event.currentTarget
    });
  };

  render() {
    const { label, status, trips } = this.props;
    const { anchorEl, dialogOpen } = this.state;
    const TripsFiltered = [];

      return (
        <Fragment>
          <List>
              <ListItemLink>
                <ListItemAvatar>
                  <Avatar>
                    <WorkIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary={trip.remarks}
                  secondary={
                    trip.startDate + "-" + trip.endDate + ", " + trip.place
                  }
                />
                <ListItemSecondaryAction>
                  <IconButton
                    edge="end"
                    aria-label="more"
                    aria-controls="simple-menu"
                    aria-haspopup="true"
                    onClick={this.handleClick}
                  >
                    <MoreIcon />
                  </IconButton>
                  <Menu
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={this.handleClose}
                  >
                    <MenuItem onClick={this.handleClose}>editTrip</MenuItem>
                    <MenuItem
                      onClick={this.props.deleteTrip.bind(this, trip.id)}>
                      deleteTrip
                    </MenuItem>
                  </Menu>
                </ListItemSecondaryAction>
              </ListItemLink>
          </List>
        </Fragment>
      );
  }
}

const mapStateToProps = state => ({
  trips: state.tripsReducer.trips
});

export default connect(
  mapStateToProps,
  { deleteTrip }
)(Trips);

但对于我来说，在从数据库中删除Trip之前，我想向用户显示一条警告消息，所以我修改了如下代码：

class Trips extends Component {
  state = {
    anchorEl: null,
    dialogOpen: false
  };

  //integracja z reduxem
  static propTypes = {
    trips: PropTypes.array.isRequired
  };

  //
  handleOpenWarning = () => {
    this.setState({
      dialogOpen: true
    });
  };

  handleCloseWarning = () => {
    this.setState({
      dialogOpen: false
    });
  };

  handleDeleteTrip = () => {
    this.setState({
      dialogOpen: false
    });
    this.props.deleteTrip.bind(this, trip.id);
  };

  handleClose = () => {
    this.setState({
      anchorEl: null
    });
  };

  handleClick = event => {
    this.setState({
      anchorEl: event.currentTarget
    });
  };

  render() {
    const { label, status, trips } = this.props;
    const { anchorEl, dialogOpen } = this.state;
    const TripsFiltered = [];

    return (
        <Fragment>
          <List>
             <ListItemLink>
                <ListItemAvatar>
                  <Avatar>
                    <WorkIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary={trip.remarks}
                  secondary={
                    trip.startDate + "-" + trip.endDate + ", " + trip.place
                  }
                />
                <ListItemSecondaryAction>
                  <IconButton
                    edge="end"
                    aria-label="more"
                    aria-controls="simple-menu"
                    aria-haspopup="true"
                    onClick={this.handleClick}
                  >
                    <MoreIcon />
                  </IconButton>
                  <Menu
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={this.handleClose}
                  >
                    <MenuItem onClick={this.handleClose}>editTrip</MenuItem>
                    <MenuItem
                      onClick={this.handleOpenWarning}
                    >
                      deleteTrip
                    </MenuItem>
                  </Menu>
                </ListItemSecondaryAction>
              </ListItemLink>
          </List>
          <Dialog
            open={dialogOpen}
            onClose={this.handleCloseWarning}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
          >
            <DialogTitle id="alert-dialog-title">
              {"Selected Trip will be deleted."}
            </DialogTitle>
            <DialogActions>
              <Button onClick={this.handleCloseWarning} color="primary">
                Cancel
              </Button>
              <Button onClick={this.handleDeleteTrip} color="primary" autoFocus>
                Delete
              </Button>
            </DialogActions>
          </Dialog>
        </Fragment>
      );
    }
}

const mapStateToProps = state => ({
  trips: state.tripsReducer.trips
});

export default connect(
  mapStateToProps,
  { deleteTrip }
)(Trips);

因此，在修改之后，我从handleDeleteTrip()函数调用{this.props.deleteTrip.bind(this，trip.id)}，而不是直接从onClick事件调用。但是当我这样做的时候，我得到了：

./src/Trips/Trips.js
  Line 57:  'trip' is not defined  no-undef

事实上，我不太理解这段代码{this.props.deleteTrip.bind( this，trip.id)}，所以我不确定如何在我的箭头函数中正确使用它来使其工作。

javascript

reactjs

redux

material-ui

回答 1

Stack Overflow用户

发布于 2019-09-30 10:05:15

在handleDeleteTrip()中。trip没有定义

  handleDeleteTrip = () => {
    this.setState({
      dialogOpen: false
    });
    this.props.deleteTrip.bind(this, trip.id);
  };

所以你应该把这段旅程传递给参数。像这样

  handleDeleteTrip = (trip) => {
    this.setState({
      dialogOpen: false
    });
    this.props.deleteTrip.bind(this, trip.id);
  };
...
              <Button onClick={(e) => this.handleDeleteTrip(trip)} color="primary" autoFocus>
                Delete
              </Button>