Блог

Главная - Вопросы по программированию - Передача функции из функционального компонента в компонент на основе класса

Передача функции из функционального компонента в компонент на основе класса

#javascript #reactjs

Вопрос:

Родительский компонент выглядит следующим образом

 import React, { useState } from "react";
import EntityDefinition from "./EntityDefinition";

export default function EntitySelection(props) {

  const testFun = () => {
    console.log("Function activated");
  };
  return (
    <>
        <div>
                <EntityDefinition                  
                  testFun={testFun}
                />{/**Calling a Class based Component*/}
        </div>
    </>
  );
}

Компонент на основе классов (Дочерний)

 import React from "react";
import { ComboBox, DropdownOption, Button } from "react-widgets";
import axios from "axios";

export default class EntityDefinition extends React.Component {

  render() {
    return (
      <React.Fragment>       
        <div>
          {" "}
          <Button onClick={this.testFun}>Close</Button>{" "} {/*/Calling the function passed*/}
        </div>
      </React.Fragment>
    );
  }
}

но когда я нажал на кнопку testFun , функция не вызывается.
я попробовал что-то вроде onClick={this.state.testFun} : onClick={testFun}
но ничего не происходит.
может кто-нибудь указать, что я здесь делаю не так.

Комментарии:

1. В качестве примечания. Я не вижу никаких веских причин для преобразования функционального компонента в компонент, основанный на классе. Обычно все происходит наоборот

Ответ №1:

testFun это реквизит. Так что используйте this.props.testFun 

 onClick={this.props.testFun}

Ответ №2:

testFun является реквизитом, и вы используете компонент класса ES6, и он получает реквизит в качестве объекта реквизита, поэтому вы можете попробовать получить к нему доступ, как показано ниже

 onClick={this.props.testFun}

Ответ №3:

Вам необходимо ссылаться на реквизиты, переданные компонентам на основе классов, используя this.props из компонентов на основе классов: Документы

В вашем случае вам следует изменить прослушиватель onClick на этот:

 <Button onClick={this.props.testFun}>
Метки: