как инициализировать два редактора Draftjs на одной странице?

Question

Я пытаюсь создать два редактора, левый и правый, но что-то пошло не так, когда я инициализирую их, оба редактора работают со сбоями. При вводе первого редактора он автоматически переходит во второй или наоборот.

Изображение редактора

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

Ниже приведен код:

import React from "react"
import { EditorState, RichUtils, AtomicBlockUtils , convertToRaw, convertFromRaw } from "draft-js"
import Editor from "draft-js-plugins-editor"

const inEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",       
}

const outEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",

}    

class PageContainer extends React.Component{        

    //Write constructor for intializing EditorSate
    constructor(props){
        super(props)
        this.state={
        editorState1:EditorState.createEmpty(),
        editorState2:EditorState.createEmpty(),
        }
    }

    onChange = editorState1 => {
        this.setState({ 
            editorState1 
        });
    };

    onChange = editorState2 => {
        this.setState({
            editorState2
        });
    };

    render(){
        return (
            <div className="editors">
                <div className="row">

                        <div style={inEditorStyle} className=" col-md-5 ">
                            <Editor 
                                className="inEditor"
                                editorState={this.state.editorState1}
                                onChange={this.onChange}
                                ref="editor1"
                            />
                        </div>
                        <div className="col-md-2 " align="center" style={{marginTop:"8%"}} >
                            <input type="button" className="btnhover btn btn-secondary pointer" id="btnFetch" value="Roman"
                            style={{width:"200px",backgroundColor:"#F5F5F5",color:"black",border:"none"}} 
                            />

                        </div>
                        <div style={outEditorStyle}  className=" col-md-5 ">
                            <Editor 
                                className="outEditor"
                                editorState={this.state.editorState2}
                                onChange={this.onChange}
                                ref="editor2"
                            />
                        </div>                           
                </div>
            </div>
        );
    }    
}    
export default PageContainer;

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

Answer 1

Вы можете создать 2 метода с одинаковым именем. Вы можете использовать метод для обработки двух состояний onChange двух компонентов редактора.

Это модифицированная версия вашего кода

import React from "react"
import { EditorState, RichUtils, AtomicBlockUtils , convertToRaw, convertFromRaw } from "draft-js"
import Editor from "draft-js-plugins-editor"

const inEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",       
}

const outEditorStyle={
    borderStyle: "solid",
    borderWidth: "1px",
    borderColor:"#DFE1E5",
    marginTop:5,
    textAlign:"left",
    width:"35%",
    height:300,
    backgroundCcolor: "#fffef7",
    boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.5)",
    borderRadius: 10,
    overflowY: "scroll",

}    

class PageContainer extends React.Component{        

    //Write constructor for intializing EditorSate
    constructor(props){
        super(props)
        this.state={
        editorState1:EditorState.createEmpty(),
        editorState2:EditorState.createEmpty(),
        }
    }
    // name parameter is the name of the state name eg editorState1
    // editorState parameter is the state of the current Editor component you are inputting text
    onChange = (name, editorState) => {
        this.setState({ 
            [name]: editorState 
        });
    };

    render(){
        return (
            <div className="editors">
                <div className="row">

                        <div style={inEditorStyle} className=" col-md-5 ">
                            <Editor 
                                className="inEditor"
                                editorState={this.state.editorState1}
                                onChange={(editorState) => this.onChange('editorState1', editorState)}
                                ref="editor1"
                            />
                        </div>
                        <div className="col-md-2 " align="center" style={{marginTop:"8%"}} >
                            <input type="button" className="btnhover btn btn-secondary pointer" id="btnFetch" value="Roman"
                            style={{width:"200px",backgroundColor:"#F5F5F5",color:"black",border:"none"}} 
                            />

                        </div>
                        <div style={outEditorStyle}  className=" col-md-5 ">
                            <Editor 
                                className="outEditor"
                                editorState={this.state.editorState2}
                                onChange={(editorState) => this.onChange('editorState2', editorState)}
                                ref="editor2"
                            />
                        </div>                           
                </div>
            </div>
        );
    }    
}    
export default PageContainer;

Answer 2

Вот ваш рабочий Пример Метод дескриптора Onchange был одинаковым в обоих редакторах.