Как слушать события на компоненте React?
Изучаю React.
Появилась необходимость сделать слушатель на компоненте. Я хочу чтобы мне были доступны все слушатели и другие атрибуты в Input.
Код Search компонента:
import { Input, Button } from "../";
export default class Search extends React.Component {
render() {
return (
<div className="search-box">
<Input value="" size="medium"></Input> // хочу слушать здесь нативные события инпута
<Button color="primary" size="medium">
Search
</Button>
</div>
);
}
}
Код Input компонента:
export default class Input extends React.Component<InputProps, {}> {
render() {
return (
<label className="input-box">
{this.props.label ? (
<span className="input-label">{this.props.label}</span>
) : null}
<input
className={`input-field input-field--${this.props.size}`}
type="text"
placeholder={this.props.placeholder}
/>
</label>
);
}
}
Для примера, во Vue.js можно делать Emit событий при нативном событии какого-то элемента.
Child:
<input v-on:input="$emit('my-custom-event', $event)">
Parent:
<my-awesome-input v-on:my-custom-event="myAwesomeMethod" />