切换文字无效

Question

我正在使用fabricjs作为画布。用户可以添加具有切换按钮的文本的功能。当开关打开时，文本显示在画布中，用户可以在其中更改文本。但是当开关关闭时，文本不会被删除。

这是我的代码

addText = val => {
  console.log("val", val);
  if (val.checked) {
    let text = new fabric.IText("Double click me to change the text!", {
      fontSize: 28,
      fontWeight: 600,
      left: 100,
      top: 100,
      fill: "black",
      width: 20,
      height: 20
    });
    this.state.canvas.add(text);
  }
};

render() {
  return (
    <div className="image-board">
      <Grid container>
        <Grid.Row>
          <Grid.Column width={10}>
            <canvas
              id="canvas"
              ref={el => (this.canvasEl = el)}
              width={500}
              height={400}
              className="z-depth-1"
            />
          </Grid.Column>
          <Grid.Column width={6}>
            <Filter
              addText={this.addText}
              addSubtitle={this.addSubtitle}
              opacityChange={this.opacityChange}
              applyTextFilter={this.applyTextFilter}
              applyColor={this.applyColor}
              applyBlur={this.applyBlur}
            />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
  );
}
}


class Text extends React.Component {
  render() {
    return (
      <div className="text-options">
        <div>
          Show Title
          <Checkbox toggle onChange={(e, val) => this.props.addText(val)} />
        </div>
        <div>
          Show Subtitle
          <Checkbox toggle onChange={(e, val) => this.props.addSubtitle(val)} />
        </div>
      </div>
    );
  }
}

export default Text;