Как превратить класс React RichTextEditor в функцию? - PullRequest
Новая
       138

Как превратить класс React RichTextEditor в функцию?

0 голосов
/ 24 сентября 2019

Я использую реагировать-rte в своем проекте и пытаюсь заставить работать текстовый редактор, но безуспешно.Я скопировал класс с сайта выше (код ниже) и попытался превратить его в функцию, так как у меня больше опыта с ними.Что мне не хватает?

Класс от react-rte -линк 

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 }}
    />
  );
}
...