如何在同一页面上初始化两个 Draftjs 编辑器？

Question

我尝试左右创建两个编辑器，但是当我初始化它时出现问题，两个编辑器都出现故障， 在第一个编辑器中键入它会自动进入第二个，反之亦然。

Editor image

我包含了所有库，当尝试使用单个编辑器运行时它工作正常，但使用第二个编辑器会产生一些问题。

下面是代码：

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 个具有相同名称的方法。 您可以使用一个方法来处理 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

这是你的工作Example 两个编辑器中的 Onchange 处理方法相同。