Обновление родительского компонента на дочернем реагируете onChange () в компоненте с помощью componentWillReceiveProps - PullRequest
Новая
       6

Обновление родительского компонента на дочернем реагируете onChange () в компоненте с помощью componentWillReceiveProps

0 голосов
/ 12 декабря 2018

Привет, я использую responsequill в моем дочернем компоненте, и я хочу обновить свое родительское состояние, когда пользователь печатает.в настоящее время я делаю это с помощью onBlur (), но это не то, что хотят пользователи.

это мой дочерний компонент .

    public componentWillReceiveProps(newProps): void {
         //console.log(newProps, "new props");
         this.setState({
           text: newProps.value
         });
       }

       public setProps() {
         //console.log("set props", this.state.text);
         if(this.state.text === "<p><br></p>"){
          this.props.onChange("");
         } else {
          this.props.onChange(this.state.text);
         }

       }

      public handleChange(value) {
        this.setState({ text: value });
        //console.log("update props of parent", value);
        //this.props.onChange(value);
      }

public render() {
        return (
          <div>
            <div className="text-editor" onBlur= {this.setProps}>
              <ReactQuill value={this.state.text} 
                        onChange={this.handleChange}
                        //onKeyPress={this.handleKeyDown}
                        //onKeyDown={this.handleKeyDown}
                        onBlur= {this.setProps} 
                        modules={this.modules} 
                        formats={this.formats}/>
            </div>
          </div>
        );
      }

и это из моего родительского компонента t, вызывающего дочерний элемент; 

 public renderEditableAnswer = (cellInfo) => {
   return (
      <div>
        <QnAAnswerInput 
            value={cellInfo.original.Answer} 
            onChange={data => this.updateQnAAnswer(data, cellInfo)}
        />
      </div>
    );
  }

public updateQnAAnswer = (data, cellInfo) => {
    let qnaItems = [...this.state.qnaItems];
    let index;
    if(cellInfo.original.Id != null){
      index = _.findIndex(qnaItems,d => d.Id == cellInfo.original.Id);
    } else {
       index = _.findIndex(qnaItems,d => d.identifier == cellInfo.original.identifier);
    }

    if(this.getText(data) !== this.getText(cellInfo.original.Answer)){
      let item = {
        ...qnaItems[index],
        Answer: data, 
      };
      qnaItems[index] = item;
      this.setState({ qnaItems });

      this.updateActionHistory(item,index);
    }
  }

этот компонент находится внутри ячейки ReactTable, следовательно, cellInfo.Обратите внимание, что у меня есть одна функциональность в родительском компоненте, которая добавит новую строку в таблицу, которая должна иметь пустые значения для дочернего компонента.я заметил, что без метода WillReceiveProps мой «Добавить новую пустую строку» не работает.

В моем текущем коде, если я закомментирую this.props.onChange (this.state.text);внутри метода handleChange при наборе текста в редакторе запускается componentWillReceiveProps (перебирая все мои реактивные значения, что очень много), что приводит к задержке при наборе текста.и это нехорошо.

В любом случае я могу обновить свое родительское состояние с помощью onChange без задержек при наборе?

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Вместо onBlur = {this.setProps} в div,

вызывать его в componentDidUpdate 

  componentDidUpdate = ( prevProps , prevState) =>{
    if(prevState.editorHtml !== this.state.editorHtml )
      this.setProps()
  }

Есть ли у вас лучшее решение?

0 голосов
/ 12 декабря 2018

Используйте только componentDidMount() и componentDidUpdate(), остальные методы жизненного цикла - плохая практика.У вас задержка ввода из-за componentWillReceiveProps, никогда не используйте ее.Я не понимаю ваш код, нет имен и у вас есть ненужный код.

...