Question

我有一个组件，它返回一个contentEditable div。用户可以在div中键入文本。这个div非常类似于textarea。我需要添加一个标签，此时光标存在于此处，方法是点击div旁边的按钮。

class EditableDiv extends React.Component {

    addSpan() {
        // return a composed <span> tag
    }

    render() {
        return(
           <div contentEditable
               onInput={(event)=>{this.handleKeyPress(event)}}>
           </div>
           <button onClick={this.addSpan}></button>;
        )
    }
}

Answer 1

这是在点击按钮后添加的代码。

修改

需要在内容可编辑div中添加span。在光标旁边。

我现在处理div handleKeyPress()事件以设置this.state.divValue并添加如果：

this.state.divValue不为空
this.state.buttonPressed是true（按下按钮）

注意：我不知道您是否已对<div contentEditable组件进行了编码，因此我按照您的说明使用了代码，只添加了value={divValue}部分

class EditableDiv extends React.Component {

  constructor() {
    super();
    // State
    this.state = {
      divValue: '',
      buttonPressed: false
    }
    // Bind
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.addSpan = this.addSpan.bind(this);
  }

  handleKeyPress(e) {
    this.setState({ divValue: e.currentTarget.value });
  }

  addSpan() {
    this.setState({ buttonPressed: true });
  }

  render() {
    var divValue = this.state.divValue;

    if (this.state.buttonPressed && divValue) {
      divValue += <span></span>;
    }

    return(
       <div>
         <div contentEditable
           onInput={(event)=>{this.handleKeyPress(event)}}
           value={divValue}>
         </div>
         <button onClick={this.addSpan}></button>
       </div>
    );
  }
}

如何在contentEditable div中的游标旁边添加一个html元素。反应Js

1 个答案:

修改