gpt4 book ai didi

reactjs - Draft.js (react-draft-wysiwyg) : text update from the outside of the Editor component does not work

转载 作者:行者123 更新时间:2023-12-05 03:37:41 26 4
gpt4 key购买 nike

我正在尝试将调用组件中的文本更新到编辑器组件中。我使用 props 来传递来自调用者的文本,但是当文本更改时(在 ContentEditor 中更新了 props),Editor 组件中的文本不是:

调用组件的代码如下:

<ControlledEditor htmlContent={this.state.validationResultContent}/>

这里是受控编辑器的代码:

    export class ControlledEditor extends Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createWithText(this.props.htmlContent)};
}


onEditorStateChange = (editorState) => {
this.setState({ editorState })
};

render() {

const { editorState } = this.state;

return (
<>
<Container className="mt-5">
<Row>
<Editor
editorState= {editorState}
onEditorStateChange={this.onEditorStateChange}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"

/>
</Row>
</Container>
</>
);
}
}

ControlledEditor.propTypes = {
htmlContent: PropTypes.string
}

感谢帮助

-------- 更新 1 --------

  • 我正在使用构建在 Draft.js 上的react-draft-wysiwyg
  • 要呈现的文本是 HTML,所以我更新了代码
  • Linda PaistecomponentDidUpdate 的回答解决了主要问题 link

遵循工作代码(对我而言):

export class ControlledEditor extends Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()}
}

componentDidUpdate(prevProps) {
if (this.props.htmlContent !== prevProps.htmlContent) {
this.setState({
editorState: EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(this.props.htmlContent)))
});
}
}

onEditorStateChange = (editorState) => {
this.setState({editorState})
};

render() {
const {editorState} = this.state;
return (
<>
<Container className="mt-5">
<Row>
<Editor
editorState={editorState}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
/>
</Row>
</Container>
<Container className="mt-5">
<Row>
<div dangerouslySetInnerHTML={{__html: this.props.htmlContent}}/>
</Row>
</Container>

</>
);
}
}

ControlledEditor.propTypes = {
htmlContent: PropTypes.string
}

最佳答案

可选:更新 Draft.js 版本

您正在使用的某些属性似乎没有记录在案。也许它们来自以前版本的 draft-js?但我会根据当前文档编写此答案。

EditoronEditorStateChange 属性应该重命名为 onChange .

EditorState 上没有createFromText。此替换包括两个步骤:

  1. ContentState 可以使用静态方法从文本创建 ContentState.createFromText .
  2. EditorState 可以使用静态方法 EditorState.createWithContentContentState 创建

所以初始状态应该是:

this.state = {
editorState: EditorState.createWithContent(
ContentState.createFromText(this.props.htmlContent)
)
};

核心问题

有了这个,我就可以运行你的代码并重现你的问题了:

I use the props to pass the text from the caller, but when the text change (props is updated in the ContentEditor) the text in the Editor component is not.

您正在根据 this.props.htmlContent 在构造函数中 的值创建 this.state.editorState。该部分代码仅在 ControlledEditor 组件首次安装时运行一次。它会在 props 更改时重新运行,因此它无法响应 this.props 中的更改。

您需要添加 componentDidUpdate生命周期方法。

componentDidUpdate(prevProps) {
if (this.props.htmlContent !== prevProps.htmlContent) {
this.setState({
editorState: EditorState.createWithContent(
ContentState.createFromText(this.props.htmlContent)
)
});
}
}

在我看来,将其转换为功能组件并使用钩子(Hook)更容易。

import { useEffect, useState } from "react";
import { Editor, EditorState, ContentState } from "draft-js";
import "draft-js/dist/Draft.css";

// helper function
const createState = (text) => {
return EditorState.createWithContent(ContentState.createFromText(text));
};

const ControlledEditor = ({ htmlContent }) => {
// define the local state, using the createState callback to create the initial value
const [editorState, setEditorState] = useState(createState(htmlContent));

// override the local state any time that the props change
useEffect(() => {
setEditorState(createState(htmlContent));
}, [htmlContent]);

return (
<Editor
editorState={editorState}
onChange={setEditorState}
/>
);
};

export default function App() {
const [text, setText] = useState("Hello World");
return (
<div>
<h2>Source Text</h2>
<textarea value={text} onChange={(e) => setText(e.target.value)} />
<h2>Editor</h2>
<ControlledEditor htmlContent={text} />
</div>
);
}

关于reactjs - Draft.js (react-draft-wysiwyg) : text update from the outside of the Editor component does not work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69203757/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com