Уберите жирный и курсивный формат при выборе заголовка - PullRequest
Новая
       16

Уберите жирный и курсивный формат при выборе заголовка

0 голосов
/ 28 октября 2018

Я создаю текстовый редактор с 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>;
  }

Демо: https://codesandbox.io/s/vyr6344ljl

1 Ответ

0 голосов
/ 29 октября 2018

Из-за вашего названия и описания проблемы очень трудно быть уверенным в том, что вы хотите.

Однако вы сохраняете свое состояние в переменных экземпляра, а не используете переменную 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>;
  }
...