реагировать на потерю внимания - PullRequest
Новая
       13

реагировать на потерю внимания

0 голосов
/ 15 мая 2019

Я написал настраиваемый компонент для редактирования контента, он выглядит следующим образом 

export default class TextEditor extends React.Component {


constructor(props) {
    super(props);
    this.ref = React.createRef();
}


onChange = (e) => {
    let value = e.target.innerHTML;
    this.props.onChange(value);
}

render() {
    const { enabled , onChange , style, className, value } = this.props;
    return (
        <div>
            <div contentEditable={enabled}
                dangerouslySetInnerHTML={{ __html: value }} 
                ref={this.ref}
                onInput={this.onChange}
                style={{
                    ...style,
                    height: '80px',
                    overflow: 'auto',
                    cursor: enabled ? 'text' : 'inherit',
                }}
                className={`form-control form-control-sm ${className}`}
                placeholder="Optional Notes..."
            />
        </div>
    )
}
}

где бы я ни печатал что-либо в редактируемом контенте, курсор перемещается в начало редактируемой области. это потому, что this.props.onChange (значение); обновляет значение снаружи и происходит повторное рендеринг. Как предотвратить сброс курсора при повторном рендеринге ??

1 Ответ

1 голос
/ 15 мая 2019

Вам понадобится комбинация componentDidMount и shouldComponentUpdate, например, так: 

class TextEditor extends React.Component {


  constructor(props) {
      super(props);
      this.ref = React.createRef();
      this.onChange = this.onChange.bind(this);
  }
  
  
  onChange(){
        var html = this.ref.current.innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({value: html});
        }
        this.lastHtml = html;
    }
    
    shouldComponentUpdate(nextProps){
        return nextProps.value !== this.ref.current.innerHTML;
    }
    
     componentDidUpdate() {
        if ( this.props.value !== this.ref.current.innerHTML ) {
           this.ref.current.innerHTML = this.props.value;
        }
    }
  
  render() {
      const { enabled , style, className, value } = this.props;
      return (
          <div>
              <div contentEditable={enabled}
                  dangerouslySetInnerHTML={{ __html: value }} 
                  ref={this.ref}
                  onInput={this.onChange}
                  onBlur={this.onChange}
                  className="editable"
                  placeholder="Optional Notes..."
              />
          </div>
      )
  }
  }
  
class App extends React.Component { 

      constructor(props) {
      super(props);
      this.onChange = this.onChange.bind(this);
      this.state = {value: ""};
  }
  
   onChange({value}) {
      this.setState({value})
   }
  
  render(){
    return (
      <TextEditor enabled={true} onChange={this.onChange} value={this.state.value}/ >
    )
  }
 }

ReactDOM.render( <App/> , document.getElementById('app'));
.editable {
  width: 100%;
  height: 100px;
  border: 1px solid black;
}
<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>
...