Я делаю простое приложение, которое создает форму JSON, и я уже включил основные сведения и сведения о занятости в виде двух разделов.

В разделе «Основные сведения» есть два входа, такие как имя и фамилия.

Теперь мне дается требование реализовать элемент управления Profile Summary, который должен быть текстовым редактором, а введенные значения должны храниться в формате JSON.

Пожалуйста, посмотрите на формат JSON в указанной ссылке codeandbox.

Файл, формирующий JSON: https: //codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/form_context.js

{
    basicDetails: {
      firstName: "",
      lastName: "",
      profileSummary: "" --------> This is where I need to fetch the text editor entered values
    },
    companyDetails: [
      {
        companyName: "",
        designation: "",
        startDate: ""
      }
    ]
  }

Файл текстового редактора: https: / /codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/text_editor.js.

< Сильный > Требования :

Требование состоит в том, что значение текстового редактора должно храниться в формате JSON.

Например: если текст сделан в редакторе bold или bullet list, то значение ключа profileSummary необходимо добавить с соответствующими тегами.

Я пытаюсь получить значение поля текстового редактора, как здесь: https://www.ippy.io/

Поскольку я пытаюсь создать структуру, подобную резюме, не могу понять, как мне нужно преобразовать значение текстового редактора в ключ JSON profileSummary.

Полный рабочий пример:

https://codesandbox.io/s/nextjs-css -only-carousel-forked-8grpo

Любая помощь высоко ценится.

0
Undefined 1 Сен 2020 в 09:35

2 ответа

Лучший ответ

Каждый раз при изменении editorState вам необходимо получить его эквивалент в простом HTML и передать его вашему компоненту BasicDetails.

onEditorStateChange = (editorState) => {
  // console.log(editorState);

  this.setState({ editorState }, () => {
    // state updated

    // convert editorState to plain HTML
    const contentRaw = convertToRaw(editorState.getCurrentContent());
    const contentHTML = draftToHtml(contentRaw);

    const fakeEvent = {
      target: {
        name: this.props.name,
        value: contentHTML
      }
    };

    // call onChange function from Parent passing the
    // fakeEvent object
    this.props.onChange(fakeEvent);
  });
};

На вашем BasicDetails вы передаете onChange и name prop в компонент EditorContainer.

...

<EditorContainer
  name="profileSummary"
  onChange={(event) => handleInputChange(event)}
/>

К сожалению, преобразование содержимого редактора DraftJS в простой HTML не встроено в библиотеку draft-js, фактически они поддерживают только следующие функции для преобразования данных

Итак, вам необходимо использовать другую библиотеку, в моем коде выше я использую {{X0 }} - тот же человек, который создал react-draft-wysiwyg.

Изменить . Мы можем избежать установки profileSummary с пустым тегом p, проверив, есть ли текст в editorState.

this.setState({ editorState }, () => {
  const currentContent = editorState.getCurrentContent();
  const contentRaw = convertToRaw(currentContent);
  const value = currentContent.hasText() ? draftToHtml(contentRaw) : "";

  const fakeEvent = {
    target: {
      name: this.props.name,
      value
    }
  };

  this.props.onChange(fakeEvent);
});

Edit next.js + css-only carousel (forked)

1
bertdida 1 Сен 2020 в 08:11

Вам нужно написать функцию hangleEditorChange в основных деталях.

Затем,

# basic_detail.js
  ...
 <div className="">
        <label htmlFor="lastName">Profile Summary</label>
        <EditorContainer  onChnage ={hangleEditorChange}/>
   </div>
...


```js
# text_editor.js

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
   this.props.onChange(editorState)
  };
0
ulyC 1 Сен 2020 в 06:52