React только один раз делает измененный contenteditable один раз - PullRequest
Новая
       5

React только один раз делает измененный contenteditable один раз

0 голосов
/ 12 сентября 2018

Это немного странно, чтобы воспроизвести, пришлось использовать таймауты, чтобы взломать его, но это действительно имитирует проблему, которую я имею.

https://jsfiddle.net/mwqyub1v/13/

1) Реагироватьрендерит div с abc123. Управляйте этой строкой (добавьте 4 или что-то еще)

2) После первого таймаута React удалит содержимое - введите что-нибудь в поле вручную,до срабатывания второго таймера. .

3) Во втором таймере React выполняет запуск метода render (обратите внимание на срабатывание регистрации) с this.props.value как null, но div не обновляется (он не удаляет текст, который вы набрали, так как abc123 исчез).

Я знаю, что игра с содержимым contenteditable может помешать React иметь возможность управлятьэто содержание (следовательно, я подавляю предупреждение).Но почему компонент обновляется правильно после того, как я изменил текст в шаге 1 выше?Кроме того, если второй таймер устанавливает value как какой-то другой текст, а не null, тогда снова компонент обновляется должным образом.даже когда значение null?

1 Ответ

0 голосов
/ 12 сентября 2018

Причина, по которой он не обновляется со вторым таймаутом, потому что виртуальный домен не обнаружил никакой разницы. Это установит innerHTML на основе props: https://jsfiddle.net/mwqyub1v/35/.

class App extends React.Component {

  componentDidMount() {
    this.node = React.findDOMNode(this);
  }

  componentDidUpdate() {
    this.node.innerHTML = this.props.value;
  }

  render() {

    console.log('value', this.props.value);

    return React.createElement('div', {
        contentEditable : true,
      suppressContentEditableWarning : true
    }, this.props.value);

  }

}
...