Javascript 选择标题标记时删除粗体和斜体格式

我正在用React构建一个文本编辑器，我发现了一个小问题。当我选择一个h1标签并点击“B”和“I”时，它仍然是格式化的。如果选定的文本是h1，我需要以某种方式阻止它，或者根本不允许格式化

按钮组件：

class Btn extends Component {
  constructor(){
    super();
    this.clicked = false;
  }
  onClick = e => {
    if(this.clicked && this.props.cmd === 'heading'){
      document.execCommand('formatBlock', false, 'p');
    } else {
      document.execCommand('formatBlock', false, this.props.arg);
      document.execCommand(this.props.cmd, false, this.props.arg);
    }
    this.clicked = !this.clicked;
  }
  render(){
    return <button onClick={this.onClick} id={this.props.id}><li className={"fas fa-" + this.props.name}></li></button>;
  }

类Btn扩展组件{ 构造函数（）{ 超级（）； this.clicked=false； } onClick=e=>{ 如果（this.clicked&&this.props.cmd==='heading'）{ document.execCommand（'formatBlock'，false，'p'）； }否则{ document.execCommand（'formatBlock'，false，this.props.arg）； document.execCommand（this.props.cmd，false，this.props.arg）； } this.clicked=！this.clicked； } render（）{ return

； }

---

演示：

您对问题的标题和描述很难确定您想要什么

但是，您将状态存储在实例变量中，而不是使用React

state

变量

虽然我不确定您遇到的错误到底是什么，但我建议您尝试以下方法：

class Btn extends Component {
  constructor(){
    super();
    this.state = { clicked: false };
  }
  onClick = e => {
    if(this.state.clicked && this.props.cmd === 'heading'){
      document.execCommand('formatBlock', false, 'p');
    } else {
      document.execCommand('formatBlock', false, this.props.arg);
      document.execCommand(this.props.cmd, false, this.props.arg);
    }
    this.setState((state, props) => ({clicked: !state.clicked}));
  }
  render(){
    return <button onClick={this.onClick} id={this.props.id}><li className={"fas fa-" + this.props.name}></li></button>;
  }

类Btn扩展组件{ 构造函数（）{ 超级（）； this.state={单击：false}； } onClick=e=>{ 如果（this.state.clicked&&this.props.cmd=='heading'）{ document.execCommand（'formatBlock'，false，'p'）； }否则{ document.execCommand（'formatBlock'，false，this.props.arg）； document.execCommand（this.props.cmd，false，this.props.arg）； } this.setState（（state，props）=>（{clicked:！state.clicked}））； } render（）{ return

； }

---

您提出的问题绝不是琐碎的，对于Stackoverflow问题来说太宽泛了。您身边有许多文本编辑器可以查看的源代码来帮助您，或者只使用一个已经过战斗测试且具有您想要的功能的编辑器。我建议您查看Draft.js：