javascript - React 只为点击的元素提供动画

Question

我希望在点击按钮后添加微调动画，当得到响应时，微调应该消失。到目前为止工作正常，但问题是我渲染了包含许多元素的列表，并且每个元素都有自己的删除按钮，同时单击一个，动画被添加到列表的所有元素。我希望它只出现一次，紧挨着列表中这个特定的点击元素。

 const displayCertificateList = (
  classes,
  mainStatus,
  handleDeleteSingleCertificate,
  animateDelete 
) => {
    return mainStatus.map((el, i) => {
      return (
        <div className={classes.certificatesListContainer} style={{border:'none'}}>
          <List key={i} style={{padding: '10px'}}>
            <ListItem style={{ padding: "0 0 0 20px" }}>
              <ListItemText
                className={classes.certificatesList}
                primary={
                  <Typography type="body2" style={{ fontWeight: "bold" }} className={classes.certificatesListFont}>
                    Valid until:
                  </Typography>
                }
                secondary={
                  <Typography
                    type="body2"
                    className={classNames(
                      classes.certificatesListSecondArgument,
                      classes.certificatesListFont,
                      el.expiresIn > 90 ? classes.green : classes.red
                    )}
                  >
                    {el.validUntil.slice(0,9)} ({el.expiresIn} days)
                  </Typography>
                }
              />
            </ListItem>
          </List>
          <div className={classes.certificatesBtn}>
            <Button
              variant="contained"
              size="small"
              color="secondary"
              className={classes.button}
              onClick={() => {
                if (
                  window.confirm(
                    `Are you really sure?
                  )
                )
                  handleDeleteSingleCertificate(el, i);
              }}
            >
              <DeleteIcon className={classes.leftIcon} />
              Delete
            </Button>
            <div style={{left: '-50%',top: '30%'}} className={classNames(animateDelete ? classes.spinner : null)}></div>
          </div>
        </div>
      );
    });
  } else {
    return (
      <div>
        <Typography component="h1" variant="h6">
          The applet is not innitialized, please initialize it first
        </Typography>
      </div>
    );
};

在父组件中:

 handleDeleteSingleCertificate = (el, i) => {
    this.setState({animatingDelete: true})

    this.make_call(
      this.state.selected, 
      (res) => {
        console.log(res)
        this.setState({animatingDelete: false})
      }
    )
  }

然后像这样传递:

        {this.state.view === 'certificates' && this.state.certificates && displayCertificates(classes, fakeData, this.handleDeleteSingleCertificate,  this.state.animatingDelete)}

Answer 1

我建议将 displayCertificateList 功能组件制作成有状态组件，并将 animatingDelete 存储在其中 - `因为它确实是特定元素的状态。

class ListItem extends React.Component {
  state = {
    isDeleting: false
  }

  handleDelete = () => {
    const { onDelete, id } = this.props;
    onDelete(id);
    this.setState({
      isDeleting: true
    })
  }
  
  render(){
    const { isDeleting } = this.state;
    return (
      <li>
        <button onClick={this.handleDelete}>Delete {isDeleting && '(spinner)'}</button>
      </li>
    )
  }
}

class List extends React.Component {
  state = {
    listItems: [
      {id: 1},
      {id: 2}
    ]
  }
  
  handleDelete = id => {
      console.log('delete ' + id);
      // do the async operation here and remove the item from state
  }
  
  render(){
    const { listItems } = this.state;
    return (
      <ul>
        {listItems.map(({id}) => (
          <ListItem id={id} key={id} onDelete={this.handleDelete} />
        ))}
      </ul>
    )
  }
}

ReactDOM.render(<List />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />