Question

我还很陌生。我要尝试的是单击“ [x]”按钮时从给定索引的数组中删除组件。据我了解，每当状态更改时，react都会重新渲染该组件。

render（）方法上的labels变量是一个组件数组，还具有其他子组件。当用户在组件之一上单击[x]时，会将其索引传递给类函数closeLabelHandler（），并将状态对象indexToDelete和isDeletingLabel分别分配给元素的索引和true。

因为我正在更改状态对象，所以我认为在重新渲染元素时会从labels数组中删除该元素，但是事实并非如此。

这是我的代码：

import React, { Component } from 'react';
import "./ImageContainer.css";
import { Stage, Layer, Image, Tag, Text, Label } from 'react-konva';
import ToolsContainer from '../ToolsContainer/ToolsContainer';

class ImageContainer extends Component {
    state = {
        showImageContainer: true,
        canvasHeight: 0,
        canvasWidth: 0,
        canvasImageUrl: "",
        image: null,
        commentsArray: [],
        labelCount: 0,
        isDeletingLabel: false,
        indexToDelete: -1
    }


    componentDidMount() {
        let stage = this.refs.stage
        const imgObj = new window.Image();
        imgObj.src = this.props.selectedImageURI

        imgObj.onload = () => {
            this.setState({ image: imgObj })
            this.setState({ canvasWidth: imgObj.width, canvasHeight: imgObj.height });
            let canvasImageUrl = stage.toDataURL();
            this.setState({ canvasImageUrl: canvasImageUrl })
        }


    }

    getLabelCount = (count) => {
        this.setState({ labelCount: count })
    }

    displayContainerHandler = () => {
        this.props.showImageContainer(!this.state.showImageContainer)
    }

    downloadImageHandler = () => {
        let a = document.createElement('a');
        a.href = this.state.canvasImageUrl.replace("image/png", "image/octet-stream");
        a.download = 'shot.png';
        a.click();
    }

    closeLabelHandler = (index) => {
        this.setState({
            isDeletingLabel: true,
            indexToDelete: index
        })
        console.log("[closeLabelHandler] " + index)
    }



    render() {

        console.log("[ImageContainer][render]" + this.state.commentsArray)
        let labels = [];

        for (let i = 0; i < this.state.labelCount; i++) {
            labels.push(
                <Label key={i} draggable={true} x={150 + i * 2} y={150 + i * 2} >
                    <Tag
                        fill="black"
                        pointerWidth={10}
                        pointerHeight={10}
                        lineJoin='round'
                        shadowColor='black'
                    />
                    <Text
                        text="Insert Comment Here"
                        fontFamily='Calibri'
                        fontSize={18}
                        padding={5}
                        fill='white'
                    />
                    <Text
                        text="[x]"
                        fontFamily='Calibri'
                        fontSize={18}
                        x={170}
                        fill='black'
                        onClick={() => this.closeLabelHandler(i)}
                    />
                </Label>
            )
            if (this.state.isDeletingLabel) {
                labels.splice(this.state.indexToDelete, 1)
                this.setState({
                    isDeletingLabel: false,
                    indexToDelete: -1
                })
            }

        }

        return (
            <div className="ImageContainer" >
                <button className="ImageContainer-close-button " onClick={this.displayContainerHandler}>[x]</button>
                <Stage ref="stage" height={this.state.canvasHeight * .5} width={this.state.canvasWidth * .5} >
                    <Layer>
                        <Image image={this.state.image} scaleX={0.5} scaleY={0.5} />
                        {labels}
                    </Layer>
                </Stage>
                <ToolsContainer getLabelCount={count => this.getLabelCount(count)} />
                <button className="pure-button" onClick={() => this.downloadImageHandler()}>Download</button>
            </div>
        )
    }
}

任何帮助将不胜感激。

Answer 1

这是实现所需内容的简单方法。您不应该直接更改状态，否则可能会导致应用程序不一致。

import React, { Component } from "react";
class Books extends Component {
   state = {
      books: [{ id: 1, title: "Book 1" }, { id: 2, title: "Book 2" }]
   };
   handleDelete = book => {
      const books = this.state.books.filter(b => b.id !== book.id);
      this.setState({ books });
   };
   render() {
      return (
         <ul>
            {this.state.books.map(book => (
               <li key={book.id}>
                  {book.title}{" "}
                  <button onClick={() => this.handleDelete(book)}>x</button>
               </li>
            ))}
         </ul>
      );
   }
}

export default Books;

从reactjs中的数组中删除组件元素

1 个答案: