我正在使用此模式来添加/更新用户信息。我在页脚中有四个按钮：“关闭”，“停用用户”，“重置密码”和“保存更改”。
创建新用户时，“停用用户”和“重置密码”按钮不会出现。它们显示给现有用户。
该代码对我来说效果很好。对于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
};
最佳答案
听起来您正在使用单个布尔变量表示两个以上的状态。
状态A
对于addUser的真实状态，我在页脚中显示其他两个按钮。
状态B
对于addUser的错误状态（即在更新现有用户时），我将显示所有四个按钮。
状态C
我将addUser的状态更改为false，这将隐藏模式。
似乎您使用addUser表示按钮渲染以及常规模式渲染。
如果将这两个问题分为两个单独的变量，一个代表是否显示多个按钮，另一个代表是否显示模式，那么您将不再看到瞬间闪烁，因为不再共享逻辑。
关于javascript - React中条件渲染的过渡问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48217266/