Как вызвать функцию в родительском компоненте из дочернего компонента - PullRequest
Новая
       72

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

0 голосов
/ 18 июня 2020

У меня есть функция под названием addFunc в моем основном классе. Этот класс вызывает функцию RenderItem для отображения списка элементов. Каждый элемент имеет onClick, который должен выполнять функцию addFunc.

Я не могу вызвать функцию addFunc из моей функции RenderItem, потому что они находятся в разных компонентах. Как мне пройти через это?

Это сводка моего кода: 

const selectedData = []

class Search extends Component {
    constructor(props) {
      super(props);
      this.addFunc = this.addFunc.bind(this);
    }

    addFunc(resultdata){
        console.log(resultdata)
        selectedData = [...selectedData, resultdata]
        console.log(selectedData)
      };
    render() {
      return (
            <ReactiveList
            componentId="results"
            dataField="_score"
            pagination={true}
            react={{
                and: ["system", "grouping", "unit", "search"]
            }}
            size={10}
            noResults="No results were found..."
            renderItem={RenderItem}
            />
      );


const RenderItem = (res, addFunc) => {
    let { unit, title, system, score, proposed, id } = {
      title: "maker_tag_name",
      proposed: "proposed_standard_format",
      unit: "units",
      system: "system",
      score: "_score",
      id: "_id"
    };
    const resultdata = {id, title, system, unit, score, proposed}

      return (
            <Button
                shape="circle"
                icon={<CheckOutlined />}
                style={{ marginRight: "5px" }}
                onClick={this.addFunc()}
            />
      );
  }

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Вы можете обернуть RenderItem компонент другим компонентом, а затем отрендерить его, 

const Wrapper = cb => {
  return (res, triggerClickAnalytics) => (
    <RenderItem
      res={res}
      triggerClickAnalytics={triggerClickAnalytics}
      addFunc={cb}
    />
  );
};

и renderItem из ReactiveList будут: renderItem={Wrapper(this.addFunc)}, тогда RenderItem компонент будет 

const RenderItem = ({ res, triggerClickAnalytics, addFunc }) => {
...

см. Песочницу: https://codesandbox.io/s/autumn-paper-337qz?fontsize=14&hidenavigation=1&theme=dark

0 голосов
/ 18 июня 2020

Вы можете передать функцию обратного вызова, определенную в родительском элементе, как опору дочернему компоненту 

class Parent extends React.Component {
sayHello(name) => {
      console.log("Hello " + name)
}
render() {
        return <Child1 parentCallback = {this.sayHello}/>
    }
}

, а затем вызвать ее из дочернего компонента 

class Child1 extends React.Component{
componentDidMount() {
   this.props.parentCallback("Foo")
}
render() { 
    return <span>child component</span>
    }
};
...