如何实现这个功能

Question

我正在尝试实现此应用程序的功能（请观看视频）

https://imgur.com/hOReqGx

我在这里做了一个展示，让你轻松解决问题

https://snack.expo.io/HknL0ZCAS

谢谢

Answer 1

我做了这个：

https://snack.expo.io/H1rGEMRAr

我用'state'来控制emptyCircles

里面的东西

constructor(props) {
    super(props);
    this.state = {
      emptyCircles: [{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      }]
    };

    this.clearEmptyCircles = this.clearEmptyCircles.bind(this);
    this.addCircle = this.addCircle.bind(this);
  }

并编写了一些函数来更新该状态：

  clearEmptyCircles() {
    this.setState({emptyCircles: [{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      }]})
  }

  addCircle(image) {
    const list = this.state.emptyCircles.slice(0);
    const firstNonEmpty = list.find(p => !p.taken);
    if (firstNonEmpty) {
      firstNonEmpty.image = image;
      firstNonEmpty.taken = true;
    }
    this.setState({emptyCircles: list});
  }