如何在同一页面上初始化两个 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

这是你的作品Example 两个编辑器中的 onchange 句柄方法相同。

Answer 2

您可以创建 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;

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

how do I initialize two Draftjs editor on same page?

reactjs

draftjs

draft-js-plugins