React Update父组件状态不会重新渲染子组件

时间:2018-09-08 20:49:35

标签: reactjs

我有一个父组件和两个子组件。我试图创建一个按钮,单击该按钮将打开一个对话框。因此,我将按钮和对话框作为父组件的2个子组件。我试图更改父组件的状态,使其变为:单击按钮时,displayNewTileDialog,这将导致父组件重新呈现,并将此值传递给对话框组件。但对话框组件未重新呈现。

我将TypeScript与React一起使用,而不是Redux。

父项:

export default class TilesRootComponent extends React.Component<ITilesRootProps, ITilesRootState>{
    constructor(props: ITilesRootProps, state: ITilesRootState) {
        super(props)
        this.state = {
            displayNewTileDialog: false
        }
    }

    onClickNewTile(): void {
        this.setState({
            displayNewTileDialog: true
        })
    }

    onHideNewTileDialog(): void {
        this.setState({
            displayNewTileDialog: false
        })
    }

    render(): JSX.Element {
        return (
            <div className="tilesRootComponent">
                <div className="ms-Grid" dir="ltr">
                    <div className="ms-Grid-row">
                        <AddNewButtonComponent buttonText="New Tile" onButtonClick= {() => this.onClickNewTile()} />
                    </div>
                    <div className="ms-Grid-row">

                    </div>
                </div>
                <NewTileDialogComponent displayNewTileDialog = {this.state.displayNewTileDialog} onHideNewTileDialog = { () => this.onHideNewTileDialog()}/>
            </div>
        )
    }
} 

按钮组件:

export default class AddNewButtonComponent extends React.Component<IAddNewButtonProps, IAddNewButtonState>{
    constructor(props: IAddNewButtonProps, state: IAddNewButtonState) {
        super(props)
    }

    render(): JSX.Element {
        return (
            <div className="addNewButtonComponent">
                <CommandButton
                    data-automation-id="test"
                    iconProps={{ iconName: 'Add' }}
                    text={this.props.buttonText}
                    onClick={() => this.props.onButtonClick()} />
            </div>
            )
        }
}

我的对话框组件是:

export default class NewTileDialogComponent extends React.Component<INewTileDialogProps, INewTileDialogState>{
    constructor(props: INewTileDialogProps, state: INewTileDialogProps) {
        super(props)
        this.state = {

            tileName: '', 
            tileImageUrl: '', 
            tileOrder: ''
        }
    }

    saveTile() : void {
        let result = `Tile name: ${this.state.tileName} \nimage url: ${this.state.tileImageUrl} \norder: ${this.state.tileOrder}`
        alert(result)
    }

    render(): JSX.Element {
        return (
            <div className="newTileDialogComponent">
                <Dialog
                    isOpen={this.props.displayNewTileDialog}
                    // onDismiss={this._closeDialog}
                    type={DialogType.largeHeader}
                    title='Add/Edit Tile'
                    subText='Modify or Add tile info in the below form: '>
                        <TextField label="Tile Name" value ={this.state.tileName} onChanged = {(newVal) => this.setState({ 'tileName': newVal})}/>
                        <TextField label="Image Url" value = {this.state.tileImageUrl} onChanged = {(newVal) => this.setState({ 'tileImageUrl': newVal})}/>
                        <TextField label="Order" value = {this.state.tileOrder} onChanged = {(newVal) => this.setState({ 'tileOrder': newVal})} /> 
                        <Button text="Submit" className={commonStyles.defaultButton } onClick = {() => this.saveTile()} />
                        <Button text="Discard" onClick = {() => this.props.onHideNewTileDialog()}/>
                </Dialog>
            </div>
        )
    }
}

我的理解是,在更改父组件的状态时,应呈现所有子组件。在这种情况下我该怎么办?

1 个答案:

答案 0 :(得分:0)

您需要将onDismiss属性传递给<Dialog />

<div className="newTileDialogComponent">
    <Dialog
        isOpen={this.props.displayNewTileDialog}
        onDismiss={this.props.onHideNewTileDialog}
        type={DialogType.largeHeader}
        // ...
    />
    </Dialog>
</div>

如果不调用它,this.props.displayNewTileDialog将永远不会更改,也不会发生重新呈现。