Question

我真的是ReactJS框架的新手。我正在尝试将回调函数从父组件传递到子组件。

我要传递的是对子组件的回调函数（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）时，将创建子组件。这与禁用的参数和传递给子组件的uniqueId无关。我要说的是，如果我尝试在子节点接口中删除changeState，则很好地创建了子组件，但是一旦我在接口中引入changeState并尝试从父组件传递它，就不会显示该子组件。 DOM。

Answer 1

如果isResolved变量不是父组件中状态的一部分，则其更改将不会重新呈现树。可能是问题所在。

如何将带有参数的回调函数从父组件传递到子组件？

1 个答案: