Как передать пользовательское событие родительскому компоненту?

Как связать компонент "question" с компонентом "word"?
  • 19 сентября 2023 г. 12:37
Ответы на вопрос 2
1. Для передачи пользовательского события родительскому компоненту в React, родительский компонент должен передать функцию в виде props дочернему компоненту. Затем, дочерний компонент может вызвать эту функцию и передать ей необходимые данные или событие.

В родительском компоненте:

```jsx
import React from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends React.Component {
  handleEvent = (data) => {
    console.log("Пользовательское событие:", data);
  };

  render() {
    return <ChildComponent onCustomEvent={this.handleEvent} />;
  }
}

export default ParentComponent;
```

В дочернем компоненте:

```jsx
import React from "react";

class ChildComponent extends React.Component {
  handleClick = () => {
    const eventData = "Данные события";
    this.props.onCustomEvent(eventData);
  };

  render() {
    return <button onClick={this.handleClick}>Нажми меня</button>;
  }
}

export default ChildComponent;
```

2. Чтобы связать компонент "question" с компонентом "word", необходимо использовать props для передачи данных между компонентами.

В компоненте "word":

```jsx
import React from "react";

class Word extends React.Component {
  render() {
    return <div>{this.props.question}</div>;
  }
}

export default Word;
```

В компоненте "question":

```jsx
import React from "react";
import Word from "./Word";

class Question extends React.Component {
  render() {
    const questionText = "Как связать компоненты?";
    return <Word question={questionText} />;
  }
}

export default Question;
```

Теперь компонент "word" получает текст вопроса от компонента "question" через props и отображает его.
Все передачи данных происходят у вас успешно. Метод testemit в компоненте question не отрабатывает? Нет, не должен. Вы нигде не вызываете этот метод и не используете его как обработчик событий. Я вижу, что вы используете $emit('testemit'), но отсутствует @testemit="testemit".
Похожие вопросы