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;