главная/React Js компонент, подсчет слов в тексте
React JS компонент подсчет слов

React Js компонент, подсчет слов в тексте

Компонент WordCount, который подсчитывает количество слов во входном тексте:

import React, { useState } from 'react';

export function WordCount() {
  const [text, setText] = useState('');
  const [wordCount, setWordCount] = useState(0);

  const handleTextChange = (event) => {
    const value = event.target.value;
    setText(value);
    setWordCount(value.trim().split(/\s+/).length);
  };

  return (
    <div>
      <label htmlFor="text-input">Enter text:</label>
      <textarea id="text-input" value={text} onChange={handleTextChange} />
      <p>Word count: {wordCount}</p>
    </div>
  );
}

Компонент состоит из текстового поля textarea и параграфа, в котором отображается количество слов во введенном тексте.

При изменении текста в поле textarea, функция handleTextChange вызывается, чтобы обновить состояние text и подсчитать количество слов в тексте с помощью метода split(). Количество слов затем отображается в параграфе.

Чтобы использовать этот компонент в своем приложении, просто импортируйте его и включите в свой код:

import React from 'react';
import { WordCount } from './WordCount';

function App() {
  return (
    <div>
      <h1>Word Count Example</h1>
      <WordCount />
    </div>
  );
}

export default App;