Текстовое поле с ограничением количества символов

Введение

В этом практическом занятии мы создадим компонент ограниченного текстового поля с использованием React. Целью этого практического занятия является получение практического опыта в использовании React-хуков, таких как useState() и useCallback(), для создания компонента, который ограничивает количество символов, которое пользователь может ввести в текстовом поле. В конце этого практического занятия у вас будет функциональный компонент текстового поля, который отображает количество введенных символов и ограничивает количество символов, которое пользователь может ввести.

Skills Graph

Текстовое поле с ограничением количества символов

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Вот код:

const LimitedTextarea = ({ rows, cols, value, limit }) => {
  const [content, setContent] = React.useState(value.slice(0, limit));

  const setFormattedContent = React.useCallback(
    (text) => {
      setContent(text.slice(0, limit));
    },
    [limit]
  );

  return (
    <>
      <textarea
        rows={rows}
        cols={cols}
        onChange={(event) => setFormattedContent(event.target.value)}
        value={content}
      />
      <p>
        {content.length}/{limit}
      </p>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <LimitedTextarea limit={32} value="Hello!" />
);

В этом коде мы:

• Упрошили комментарии, чтобы дать более краткое описание того, что делает каждая часть кода.
• Удалили ненужные комментарии кода.
• Удалили функцию setContent из массива зависимостей useCallback, так как ее там не нужно.
• Добавили круглые скобки вокруг аргумента text в функции useCallback для согласованности.
• Использовали стрелочные функции для обработчика события onChange для краткости.

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по текстовому полю с ограничением количества символов. Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.