尝试清除所选单词或字符时，整个文本将被清除

Question

I am using fabric js with reactjs for adding the text to canvas. The text is added but when i try to clear the character or selected words, the whole text gets cleared. I saw some of the resources regarding this but i am using reactjs so it was hard to resolve this issue for me. Here is how i have done

class ImageBoard extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: undefined
    };
  }

  handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      event.preventDefault();
      if (this.state.selected !== undefined) {
        this.canvas.remove(this.state.selected);
        this.setState({ selected: undefined });
      }
    }
  };

  componentDidMount() {
    this.canvas = new fabric.Canvas("canvas");
    document.addEventListener("keydown", this.handleDeleteKey, false);
    this.canvas.on("object:selected", e =>
      this.setState({ selected: e.target })
    );
    this.canvas.on("selection:cleared", e =>
      this.setState({ selected: undefined })
    );
    this.canvas.setBackgroundColor(
      "rgba(255, 73, 64, 0.6)",
      this.canvas.renderAll.bind(this.canvas)
    );
  }

  componentDidUpdate(prevProps) {
    if (prevProps.images !== this.props.images) {
      this.setCanvasBackground(this.props.images, this.canvas);
    }
  }

  addText = () => {
    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.canvas.add(text);
  };

  render() {
    return (
      <Wrapper>
        <Column width={80}>
          <canvas
            id="canvas"
            ref={el => (this.canvasEl = el)}
            width={580}
            height={400}
            className="z-depth-1"
          />
        </Column>
        <Filter
          addText={this.addText}
        />
      </Wrapper>
    );
  }
}

export default connect(mapStateToProps)(ImageBoard);

Answer 1

Since you're removing a selected object in the delete / backspace key handler, it's not unexpected that when you're trying to clear text characters with delete / backspace , the whole text gets removed. The condition check if (this.state.selected !== undefined) is not enough because when you enter text editing mode, the text object is still selected.

However, you can additionally check IText's isEditing property to see if the selected object is also in the editing mode:

  handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      if (this.state.selected !== undefined && !this.state.selected.isEditing) {
        event.preventDefault();
        this.canvas.remove(this.state.selected);
        this.setState({ selected: undefined });
      }
    }
  };

Here's a working snippet to demonstrate:

 class App extends React.Component { constructor(props) { super(props); this.state = { selected: undefined }; } handleDeleteKey = event => { if (event.keyCode === 46 || event.keyCode === 8) { if (this.state.selected !== undefined && !this.state.selected.isEditing) { event.preventDefault(); this.canvas.remove(this.state.selected); this.setState({ selected: undefined }); } } }; componentDidMount() { this.canvas = new fabric.Canvas("canvas"); document.addEventListener("keydown", this.handleDeleteKey, false); this.canvas.on("object:selected", e => this.setState({ selected: e.target }) ); this.canvas.on("selection:cleared", e => this.setState({ selected: undefined }) ); this.canvas.setBackgroundColor( "rgba(255, 73, 64, 0.6)", this.canvas.renderAll.bind(this.canvas) ); } addText = () => { let text = new fabric.IText("Double click me to change the text!", { fontSize: 28, fontWeight: 600, left: 20, top: 20, fill: "black", width: 20, height: 20 }); this.canvas.add(text); }; render() { return ( <div> <canvas id="canvas" ref={el => (this.canvasEl = el)} width={400} height={170} /> <button onClick={this.addText}> add </button> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='app'></div>