javascript - React 中条件渲染的转换问题

Question

我正在使用此模式来添加/更新用户信息。页脚中有四个按钮:“关闭”、“停用用户”、“重置密码”和“保存更改”。

创建新用户时，不会出现“停用用户”和“重置密码”按钮。它们针对现有用户显示。

该代码对我来说效果很好。对于 addUser 的真实状态，我在页脚中显示其他两个按钮。对于 addUser 的错误状态(即更新现有用户时)，我显示所有四个按钮。

当我关闭模式时，我将 showModal 的状态更改为 false，从而隐藏模式。

但是在转换的一瞬间，我可以看到按钮，否则这些按钮仅在错误状态下可见。

当模式即将关闭时，如何防止显示其他按钮“停用用户”和“重置密码”？

modal = () => {
        const { FirstName, LastName, Email, PhoneNumber, Type, showModal, addUser } = this.state;
        const title = FirstName && LastName ? `${ LastName }, ${ FirstName }` : Email;
        return (
        <Modal show={showModal} onHide={this.close}>
            <Modal.Header>
                <Modal.Title>{title}</Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <Input inputValue={FirstName || ''} inputLabel="First Name" id="FirstName" handleChange={this.handleChange}/>
                <Input inputValue={LastName || ''} inputLabel="Last Name" id="LastName" handleChange={this.handleChange}/>
                <Input inputValue={Email} inputLabel="Email" id="Email" disabled={!this.state.addUser} validationSate={this.state.EmailErrorState} errorMessage={this.state.EmailErrorMessage} handleChange={this.handleChange}/>
                <Input inputValue={this.formatPhone(PhoneNumber)} inputLabel="Phone Number" id="PhoneNumber" handleChange={this.handleChange}/>
                <Dropdown selectedOption={Type} dropdownLabel="Type" id="Type" dropdownOptions={this.typeOptions} handleChange={this.handleDropdownChange}/>
            </Modal.Body>

            {this.getFooter()}
        </Modal>
    );
}

getFooter = () => {
    if (this.state.addUser) {
        return (
            <Modal.Footer>
                <Button onClick={this.close}>Close</Button>
                <Button bsStyle="primary" onClick={this.updateUser} disabled={this.state.disableSave}>Save changes</Button>
            </Modal.Footer>
        );
    } else {
        return (
            <Modal.Footer>
                <Button onClick={this.close}>Close</Button>
                <Button onClick={this.deactivateUser}>Deactivate User</Button>
                <Button bsStyle="danger" onClick={this.resetPassword}>Reset Password</Button>
                <Button bsStyle="primary" onClick={this.updateUser} disabled={this.state.disableSave}>Save changes</Button>
            </Modal.Footer>
        );
    }
}

close = () => {
    this.setState(previousState => ({ ...this.blankState }));
}

空白状态如下:

blankState = {
    Email: '',
    FirstName: '',
    LastName: '',
    PhoneNumber: '',
    Type: '',
    showModal: false,
    addUser: false,
    disableSave: true
};

Answer 1

听起来您正在使用单个 bool 变量来表示 2 个以上的状态。

状态A

For true state of addUser, I display other two buttons in footer.

状态B

For false state of addUser (i.e while updating existing users), I display all four buttons.

状态C

I change the state of addUser to false which hides the modal.

看来您使用 addUser 来表示按钮渲染以及一般模式渲染。

如果将这两个问题拆分为两个单独的变量，一个表示是否显示多个按钮，另一个表示是否显示模式，那么您将不再看到瞬间闪烁，因为逻辑是不再共享。