В мире ReactJS существуют различные техники и методы обработки пользовательского ввода и редактирования текста. Две часто используемые функции — «contenteditable» и «maxlength», которые позволяют пользователям редактировать контент непосредственно на веб-странице. В этой статье мы рассмотрим различные подходы и примеры кода, чтобы овладеть искусством использования «contenteditable» и «maxlength» в ReactJS. Итак, берите текстовый редактор и приступайте!

Метод 1. Управляемые компоненты с помощью обработчиков событий

Один из способов обработки пользовательского ввода в ReactJS — использование контролируемых компонентов. Вы можете фиксировать изменения, внесенные пользователем, и соответствующим образом обновлять состояние. Вот пример:

import React, { useState } from 'react';
const MyComponent = () => {
  const [content, setContent] = useState('');
  const handleChange = (event) => {
    const input = event.target.value;
    if (input.length <= maxLength) {
      setContent(input);
    }
  };
  return (
    <div contentEditable="true" onInput={handleChange}>
      {content}
    </div>
  );
};

Метод 2: фильтрация ссылок и контента

Другой подход — использовать ссылки для доступа и управления содержимым внутри редактируемого элемента. Вы можете применить логику фильтрации контента, чтобы обеспечить соблюдение ограничения максимальной длины. Вот пример:

import React, { useRef } from 'react';
const MyComponent = () => {
  const maxLength = 10;
  const contentRef = useRef('');
  const handleInput = () => {
    const element = contentRef.current;
    if (element.textContent.length > maxLength) {
      element.textContent = element.textContent.slice(0, maxLength);
    }
  };
  return (
    <div
      contentEditable="true"
      onInput={handleInput}
      ref={contentRef}
    ></div>
  );
};

Метод 3: пользовательские компоненты с проверкой

Вы можете создавать собственные компоненты, которые инкапсулируют логику редактирования контента и предоставляют дополнительные функции проверки. Вот пример:

import React, { useState } from 'react';
const CustomEditor = ({ maxLength }) => {
  const [content, setContent] = useState('');
  const handleChange = (event) => {
    const input = event.target.value;
    if (input.length <= maxLength) {
      setContent(input);
    }
  };
  return (
    <div contentEditable="true" onInput={handleChange}>
      {content}
    </div>
  );
};
const MyComponent = () => {
  return <CustomEditor maxLength={10} />;
};

В этой статье мы рассмотрели различные методы обработки «contenteditable» и «maxlength» в ReactJS. Мы рассмотрели контролируемые компоненты с обработчиками событий, фильтрацией ссылок и контента, а также пользовательские компоненты с проверкой. У каждого метода есть свои преимущества, поэтому выберите тот, который лучше всего соответствует требованиям вашего проекта.

Не забывайте осторожно обращаться с пользовательским вводом, обеспечивая соблюдение ограничения максимальной длины. Эффективно реализуя эти методы, вы можете улучшить взаимодействие с пользователем и создать мощные возможности редактирования текста в своих приложениях ReactJS.