React Summernote onInit 函数导致问题

Question

我正在使用 [电子邮件受保护]，我遇到的问题是我无法使用

value

或

children

道具设置编辑器的默认值。

我使用了

onInit

函数方法。以下是我正在使用的代码：

<ReactSummernote
  className="ReactSummernote"
  codeview={this.state.codeview}
  options={{
    height: 350,
    dialogsInBody: true,
    toolbar: [
      ["style", ["style"]],
      ["font", ["bold", "underline", "clear"]],
      ["fontname", ["fontname"]],
      ["para", ["ul", "ol", "paragraph"]],
      ["table", ["table"]],
      ["insert", ["link", "picture", "video"]],
      ["view", ["codeview"]]
    ]
  }}
  onChange={(email_body) => {
    console.log("text changed");
    this.setState({email_body});
  }}
  onInit = {() => {
    console.log("Hi INIT")
    $('.ReactSummernote').summernote('code', this.state.email_body);
  }}
/>

这里我在里面使用 jQuery

onInit

。原因是我已经尝试过参考方法，但它总是给我带来错误或未执行我的目标功能。当我使用上述方法（提到的代码）时，它给出了默认值。当我更改编辑器的内容时，问题就出现了。

onChange

事件处理程序不起作用。它没有检测到编辑器中的任何更改。现在的原因可能是当我使用 jQuery 时，它干扰了 React 对组件的控制。但我如何从中获得功能。

Answer 1

您可以使用

$('.ReactSummernote').summernote('code')

获取当前值，然后将函数作为

prop

传递。每次调用

onChange

时，将这个

value

传递给

prop function

，以便您获得更新的值。

<ReactSummernote
  className="ReactSummernote"
  codeview={this.state.codeview}
  options={{
    height: 350,
    dialogsInBody: true,
    toolbar: [
      ["style", ["style"]],
      ["font", ["bold", "underline", "clear"]],
      ["fontname", ["fontname"]],
      ["para", ["ul", "ol", "paragraph"]],
      ["table", ["table"]],
      ["insert", ["link", "picture", "video"]],
      ["view", ["codeview"]]
    ]
  }}
  onChange={(email_body) => {
    console.log("text changed");
    //You can do like this
    let content=  $('.ReactSummernote').summernote('code');
    this.props.setValue(content);
    this.setState({email_body});
  }}
  onInit = {() => {
    console.log("Hi INIT")
    $('.ReactSummernote').summernote('code', this.state.email_body);
  }}
/>