Как обрабатывать несколько полотен в ReactJS - PullRequest
Новая
       24

Как обрабатывать несколько полотен в ReactJS

1 голос
/ 28 апреля 2020

Я хочу отобразить 2 холста на одной странице, которые я храню в массиве в состоянии класса. Basi c code- 

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.myRef1 = React.createRef();
    this.state = {
        isDrawing: false,
        startX: 0,
        startY: 0,
        boards: [<canvas className="wb-canvas" ref={this.myRef} width={800} height={400} id={1} />, <canvas className="wb-canvas" ref={this.myRef1} width={800} height={400} id={2} />],
    };
}

У меня есть кнопка переключения, которая при нажатии должна переключать две платы. switch() function- 

switch() {
    let a = this.state.boards[0];
    let b = this.state.boards[1];
    this.setState({
        boards: [b, a],
    });
    console.log(this.state.boards);
}

Предположим, я рисую дерево на верхнем холсте и цветок на нижнем. При нажатии переключателя два элемента холста переключаются успешно (видимые в инструментах разработчика), но дерево все еще появляется на верхнем и цветок на нижнем, то есть выглядит так, как будто холсты не переключались на веб-странице.

Я пытался использовать ctx.save() и ctx.restore() для холстов, но это тоже не сработало.

Я не понимаю, почему это происходит? Что я тут не так делаю?

...