Question

嗨，我在子组件中使用reactquill，并且我想在用户键入内容时更新父状态。目前，我正在使用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>
        );
      }

这是我从父母组成部分打电话给孩子的

 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（遍历我的所有reacttable值，很多），这会延迟键入文本。这不好。

我是否仍可以使用onChange更新我的父状态，而无需键入延迟？

Answer 1

仅使用componentDidMount()和componentDidUpdate()其他生命周期方法是不好的做法。由于componentWillReceiveProps，您有输入延迟，切勿使用。我不了解您的代码，没有名称，并且您有不必要的代码。

Answer 2

代替div中的onBlur = {this.setProps}，

在componentDidUpdate中调用它

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

您有更好的解决方案吗？

使用componentWillReceiveProps更新子组件上的子组件reactquill onChange（）上的父组件

2 个答案: