Как слушать события на компоненте 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" />


Ответы (0 шт):