как создать компонент в react
Если нужен пример для начального понимания о компонентах, смотрите здесь.
В этом примере рассмотрим компонент чуть посложнее, который уже имеет интерактивную часть:
import React, { useState } from 'react';
function InputField() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return (
<div>
<input type='text' value={value} onChange={handleChange} />
<p>You typed: {value}</p>
</div>
);
}
export default InputField;
Здесь мы используем хук useState
, чтобы создать состояние компонента. Мы начально устанавливаем значение состояния в пустую строку с помощью useState('')
. Затем мы создаем функцию handleChange
, которая будет вызываться при изменении содержимого поля ввода и обновлять состояние компонента с помощью setValue
.
Возвращаемое значение компонента InputField
представлено из <input>
элемента и тега <p>
, который будет отражать текущее значение поля ввода. Мы связываем значение поля ввода с состоянием компонента с помощью value={value}
, а также добавляем обработчик изменения onChange={handleChange}
.
Теперь мы можем использовать этот компонент в другом файле, в другом компоненте.