2

我正在使用 Slate JS 编辑器构建一个 textarea 电子邮件表单。我想显示我自己的值，而不是 slate 默认初始状态值，该值作为来自 redux 的道具传递给组件。

所以代替这个：

        <Editor
    spellCheck
    autoFocus
    placeholder="Enter your text..."
    ref={this.ref}
    **value = {this.state.value}**
    onPaste={this.onPaste}
    onChange={this.onChange}
    renderNode={this.renderNode}
    renderMark={this.renderMark}
    />

我正在这样做：

        <Editor
    spellCheck
    autoFocus
    placeholder="Enter your text..."
    ref={this.ref}
    **value = {Value.fromJSON(JSON.stringify(this.props.richText))}**
    onPaste={this.onPaste}
    onChange={this.onChange}
    renderNode={this.renderNode}
    renderMark={this.renderMark}
    />

因此，该道具作为对象传递，首先转换为 json，然后转换为所需的 slate 编辑器格式。这不会破坏组件，但该值不会显示在编辑器中。我做错了什么以及将 slate 编辑器值设置为道具的正确方法是什么？感谢您对此的任何帮助！

4

1 回答 1

0

valuein Slate 不仅仅是一个文本字段的值，它基本上存储了有关 Slate 编辑器的所有数据。

要从 props 中传入数据，您需要将其反序列化this.props.richText并存储在 state 中，然后在value每次Editor更改时更新 state。如果你想要一个纯文本编辑器，你会这样做。

import { Editor } from 'slate-react'
import Plain from 'slate-plain-serializer'
​
class App extends React.Component {
  state = {
    value: Plain.deserialize(this.props.richText),
  }
​
  onChange = ({ value }) => {
    this.setState({ value })
  }
​
  render() {
    return <Editor value={this.state.value} onChange={this.onChange} />
  }
}

如果您想要一个富文本或 html 编辑器，则反序列化会涉及更多内容，但如果您遵循以下指南，则非常简单：

于 2018-11-16T23:16:39.257 回答