javascript - 在 ReactJs 中通过拖放交换两个图像

Question

使用ReactJs，当用户拖动图像然后放到另一个图像上时，它们应该交换。

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
                {
                    name: 'src1',
                    src: 'https://source.unsplash.com/user/erondu/200x300'
                },
                {
                    name: 'src2',
                    src: 'https://picsum.photos/200/300'
                },
                {
                    name: 'src3',
                    src: 'http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg'
                },
                {
                    name: 'src4',
                    src: 'http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg'
                }
            ],
            dragImgName: null,
            dragImgSrc: null,
            dropImgName: null,
            dropImgSrc: null,
            dragImgObj: null
        }

    }
dragWord(item) { 
//got the object of dragged image array
        this.setState({ dragImgName: item.name });
        this.setState({ dragImgSrc: item.src });
    }
    dropWord(event, item) {
        //Item got the object of that image on which drag going to happen.
        // console.log(item.src);
        event.preventDefault();
        var tempDropImg = item.src;
        var tempDragImg = this.state.dragImgSrc;

        this.setState({ dropImgSrc: item.src })
        this.setState({
            arr: this.state.arr.map(el => {
                console.log(el, this.state.dragImgSrc);
                // return (el.src === tempDropImg ? { ...el, src: tempDragImg } : el)
                return (el.src === tempDropImg ? Object.assign({}, el, { src: tempDragImg }) : el)
            })
        });

        this.setState({
            // arr: this.state.arr.map(el => (el.src === tempDragImg ? { ...el, src: tempDropImg } : el))
            arr: this.state.arr.map(el => (el.src === tempDragImg ? Object.assign({}, el, { src: tempDropImg }) : el))
        });
}
render() {
        return (<>
            <div>
                <p>Drag and drop the pictures in order to show.</p>
            </div>
            {
                this.state.arr.map(item => {
                    return (<div key={item.name} onDragOver={(event) => event.preventDefault()}
                        name={`${item.name}`} onDrop={(event) => this.dropWord(event, item)} >
                        <div className="mover boxA" draggable="true" onDragStart={() => { this.dragWord(item) }} >
                            <img src={item.src} alt={item.name} style={{ height: 140, width: 140 }} />
                        </div>
                    </div>)
                })
            }

        </>);
    }
}export default App;

我尝试了所有可能的方法，进行了很多搜索，但我在 React Native 中得到了这个解决方案。我也使用了更新方法，仍然没有发生。看我的codeSandBox我的更新代码。注意-注释代码中第55行的setState以进行更改。

Answer 1

代码的问题在于，您在 dropWord 方法上设置了三次状态，并且第三次调用 setState 时，您覆盖了该调用您之前已完成更改 arr 变量的操作。

您不需要在 dropWord 方法上调用 setState 三次，我建议您使用交换的图像创建列表，然后设置状态。设置状态将呈现组件，因此您应该尝试最小化设置状态调用。

将您的 dropWord 方法更改为以下代码，它应该可以工作:

 dropWord(event, item) {
    event.preventDefault();
    let tempDropImg = item.src;
    let tempDragImg = this.state.dragImgSrc;
    this.setState({
      dropImgSrc: item.src,
      arr: this.state.arr.map(el => {
        if (el.src === tempDropImg) return { ...el, src: tempDragImg };
        if (el.src === tempDragImg) return { ...el, src: tempDropImg };
        return el;
      })
    });
  }

相同的逻辑也适用于 dragWord 函数。您不需要调用 setState 两次。最好改为:

  dragWord(item) {
    this.setState({ dragImgName: item.name, dragImgSrc: item.src });
  }