привязать это - позвонить удалить элемент - PullRequest
Новая
       10

привязать это - позвонить удалить элемент

1 голос
/ 30 сентября 2019

Я хотел бы обратиться к более опытным коллегам за помощью в понимании приведенного ниже фрагмента кода и заставить его работать в моем приложении.

Общая цель - вызвать действие 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);

Так что после этой модификации я вызываю {this.props.deleteTrip.bind (this, trip.id)} из функции handleDeleteTrip () вместо непосредственно из события onClick. Но когда я это сделал, я получил: 

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

На самом деле я не очень разбираюсь в этом фрагменте кода {this.props.deleteTrip.bind (this, trip.id)}}, поэтому я не знаю, какчтобы правильно использовать его в моей функции стрелки, чтобы заставить это работать.

1 Ответ

1 голос
/ 30 сентября 2019

в 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>
...