Как Ref React конвертировать в строку?

Question

[StepsOnes]

Есть такой компонент, я привязал к нему реф, по нажатию на кнопку хочу добавить его содержимое в БД в виде строки

<Row className={'pt-5'}>
          <Col className={'col-6'}>
            <div id={'post-content'} ref={contentRef}>
              <h1 className={'mb-4'}>Омлет с молоком на сковороде</h1>

              <p className={'mb-4'}>
                Омлет с молоком, приготовленный на сковороде, — блюдо очень быстрое и простое. Однако идеальный результат потребует от вас определенной сноровки: омлет должен получиться очень нежным, безо всякой хрустящей корочки. Поэтому мы специально очень подробно расписали весь процесс. Обратите особое внимание на то, что яйца с молоком взбиваются, точнее, взбалтываются именно вилкой. Это очень важно, ведь в данном случае пышность совершенно ни к чему. Во Франции взбивание венчиком или тем более миксером ингредиентов этого блюда вообще считается дурным кулинарным тоном. И хотя там в принципе не жалуют приготовление омлета с молоком (традиционно используются только яйца), нам подобный вариант очень и очень нравится.
              </p>

              <p className={'mb-4'}></p>
            </div>
          </Col>
        </Row>

Событие клика:

const sendPost = async () => {
    try {
      const newPost = JSON.stringify(contentRef.current)
      setTextContent(newPost)
      const { data } = await axios.post('http://localhost:8000/api/post/create', {
        post: textContent
      })
    } catch (err) {
      console.log(err)
    }
  }

Но JSON.stringify не может конвертировать такой объект в строку, как мне это реализовать?

Answer 1

[Taulan Khatuaev]

вы можете использовать свойство innerHTML

const contentString = contentRef.current.innerHTML;

Это свойство содержит все вложенные элементы и текст в виде строки HTML.

const sendPost = async () => {
    try {
      const contentString = contentRef.current.innerHTML;
      setTextContent(contentString);
      const { data } = await axios.post('http://localhost:8000/api/post/create', {
        post: textContent
      });
    } catch (err) {
      console.log(err);
    }
  };

Comments

[StepsOnes]

я не знаю как объяснить, но оно через раз заносится в БД. первый просто 0 заносится, а второй уже контент дива. И webstorm ругается, что метода innerHtml не существует

[Taulan Khatuaev]

StepsOnes, вы можете использовать свойство innerHTML элемента, на который ссылается ваш ref.
события клика innerHTNL

const sendPost = async () => {
  try {
    const newPost = contentRef.current.innerHTML;
    setTextContent(newPost);
    const { data } = await axios.post('http://localhost:8000/api/post/create', {
      post: textContent
    });
  } catch (err) {
    console.log(err);
  }
}

[StepsOnes]

Taulan Khatuaev, не работает)

[Taulan Khatuaev]

StepsOnes, Тогда сделай чтобы он обрабатывал ошибки

const sendPost = async () => {
  try {
    const newPost = contentRef.current.innerHTML;
    setTextContent(newPost);
    const { data } = await axios.post('http://localhost:8000/api/post/create', {
      post: textContent
    });
    console.log(data);
  } catch (err) {
    console.log('Error occurred while creating post:', err);
  }
}