如何将React RichTextEditor类变成一个函数？

Question

我在项目中使用react-rte，并尝试使文本编辑器正常工作，但没有成功。我从上面的网站（下面的代码）复制了该类，并尝试将其转换为函数，因为我对它们有更多的经验。我想念什么？

react-rte -link中的类

class MyStatefulEditor extends Component {
  static propTypes = {
    onChange: PropTypes.func
  };

  state = {
    value: RichTextEditor.createEmptyValue()
  }

  onChange = (value) => {
    this.setState({value});
    if (this.props.onChange) {
      // Send the changes up to the parent component as an HTML string.
      // This is here to demonstrate using `.toString()` but in a real app it
      // would be better to avoid generating a string on each change.
      this.props.onChange(
        value.toString('html')
      );
    }
  };

  render () {
    return (
      <RichTextEditor
        value={this.state.value}
        onChange={this.onChange}
      />
    );
  }
}

这是我的功能：

function MyStatefulEditor ({ values, setValues }) {
  const value = RichTextEditor.createEmptyValue();

  console.log(values, setValues);

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
    value.toString("html");
  };

  return (
    <RichTextEditor
      value={values.bodyText}
      onChange={handleChange("bodyText")}
      required
      id="body-text"
      name="bodyText"
      className={classes.textField}
      type="string"
      multiline
      rows="20"
      variant="filled"
      style={{ minHeight: 410 }}
    />
  );
}

Answer 1

我成功了，万一有人在寻找答案！

// values.bodyText has the database information, 
// if I'm not adding a new thing, but editing an old one

<BodyTextEditor
  value={values.bodyText}
  setValue={bodyText => setValues({...values, bodyText })}
/>

功能：

// some things inside RTE are just for styling, delete the id's etc. 

function BodyTextEditor({ value, setValue }) {

  const [editorValue, setEditorValue] =
    React.useState(RichTextEditor.createValueFromString(value, 'markdown'));

  const handleChange = value => {
    setEditorValue(value);
    setValue(value.toString("markdown"));
  };

  return (
    <RichTextEditor
      value={editorValue}
      onChange={handleChange}
      required
      id="body-text"
      name="bodyText"
      type="string"
      multiline
      variant="filled"
      style={{ minHeight: 410 }}
    />
  );
}