javascript - 绑定(bind)这个 - 调用删除项

Question

我想请更多有经验的同事帮助理解下面的代码并使其在我的应用程序中运行。

总体目标是从我的按钮调用 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() 函数而不是直接从 onClick 事件调用 {this.props.deleteTrip.bind(this, trip.id)}。但是当我这样做时，我得到了:

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

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

Answer 1

在 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>