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

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

0 голосов
/ 04 января 2019

Я действительно новичок в ReactJS Framework. Я пытаюсь передать функцию обратного вызова от родительского к дочернему компоненту.

Я пытаюсь передать функцию обратного вызова (changeState) дочернему компоненту. Дочерний компонент - это кнопка fabric-ui, и эта функция будет вызываться при нажатии на кнопку.

Родительский код: только необходимый код 

public constructor(props: {}) {
    super(props);

    this.state = {
      columns: [],
      hasError:false,
      sortedItems: []
    };  
    this.changeState = this.changeState.bind(this);
  }
public changeState = (itemId:React.ReactText)=>{
    const resolvedKey='Status';
    const idKey='Status';
    const item = this.state.sortedItems!.filter(ite => ite[idKey] === itemId)[0];
    item[resolvedKey] = 'Résolu';
  }
<ResolveButton disabled={isResolved} uniqueId={fieldContent} changeState={this.changeState  } />

Код ребенка 

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import * as React from 'react';

export interface IHandleChange {
    changeState: (itemId:React.ReactText)=>void;
    disabled:boolean;
    uniqueId:string| number;
}
export class ResolveButton extends React.Component<IHandleChange, {}> {
    constructor(props:any) {

        super(props);
    }
    public handleClick = () => {
        this.props.changeState(this.props.uniqueId);
        alert(`Item ${this.props.uniqueId}`);
    }

    public render(): JSX.Element {
        return (
            <div>
                {
                    !this.props.disabled && 
                    <PrimaryButton
                        data-automation-id="test"
                        text="Résolu"
                        onClick={this.handleClick}
                        allowDisabledFocus={true}
                    />
                }
            </div>
        );
    }
}
export default ResolveButton;

Проблема в том, что дочерний компонент даже не создается, когда я выполняю приведенный выше код. Однако дочерний компонент создается, когда я не передаю функцию обратного вызова (changestate). Это не имеет ничего общего с отключенными параметрами и уникальным идентификатором, передаваемым дочерним компонентам. я пытаюсь сказать, что если я пытаюсь удалить changeState в интерфейсе дочернего узла, дочерний компонент хорошо создан, однако, как только я ввожу changeState в интерфейс и пытаюсь передать его из родительского компонента, дочерний элемент никогда не отображается в ДОМ.

1 Ответ

0 голосов
/ 04 января 2019

Если переменная isResolved не является частью состояния в родительском компоненте, ее изменение не будет повторно отображать дерево. Это может быть проблемой.

...