如何实现此功能

Question

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

https://imgur.com/hOReqGx

我在这里做了一个博览会，方便您解决问题

https://snack.expo.io/HknL0ZCAS

谢谢

Answer 1

我做了这个：

https://snack.expo.io/H1rGEMRAr

我使用“状态”来控制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});
  }