Question

我正在使用此模式添加/更新用户的信息。我在页脚中有四个按钮：＆＃39;关闭＆＃39;，＆＃39;停用用户＆＃39;，＆＃39;重置密码＆＃39;和＆＃39;保存更改＆＃39;。

创建新用户时，

取消激活用户和重置密码按钮不会出现。它们出现在现有用户身上。

该代码适合我。对于addUser的真实状态，我在页脚中显示其他两个按钮。对于addUser的错误状态（即在更新现有用户时），我显示所有四个按钮。

当我关闭模态时，我将showModal的状态更改为false，这会隐藏模态。

但是在瞬间过渡期间，我可以看到按钮，否则这些按钮只能用于假状态。

如何阻止显示其他按钮＆＃39;停用用户＆＃39;和＆＃39;重置密码＆＃39;当模态即将结束时？

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

听起来您使用单个布尔变量来表示超过2个状态。

国家A

对于addUser的真实状态，我在页脚中显示其他两个按钮。

B国

对于addUser的错误状态（即更新现有用户时），我显示所有四个按钮。

国家C

我将addUser的状态更改为false，这会隐藏模态。

您似乎使用addUser来表示按钮渲染以及一般模态渲染。

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

Answer 2

你说'我将addUser的状态改为false，隐藏了模态。'

但你的模态

<Modal show={showModal} onHide={this.close}>

具有showModal属性和onHide方法，在showModal方法中将onHide更改为false是隐藏模态的正确方法。

反应中条件渲染的转换问题

2 个答案: