React-Bootstrap 打开后立即发出警报 "onClose"

Question

使用 React，Next.JS 和 React-Bootstrap

所以，我试图创建一个可关闭的警报，就像在 React-Bootstrap 文档中一样，但是，它不会为我关闭。经过进一步检查（这就是 console.logs 的目的），我注意到我的警报组件在打开后立即启动“onClose”。那是个问题。此外，我还注意到，无论我将什么作为“onClosing”传递，它在控制台中都会读取为“未定义”，而不是输出我发送给它的函数。这变得更加奇怪，因为仅仅两行之后，我发送了相同的功能，但状态相反到另一个组件（我向网站发出信号以打开警报），并且它工作得很好。我已经在这里待了几个小时了，而且我很困惑。任何帮助将不胜感激！

初始化时我的状态变量

const [showAlert, setShowAlert] = useState(false)

这是我的警报组件

import {Alert, Button, ButtonGroup, ButtonToolbar, Collapse} from 'react-bootstrap'
import PropTypes  from 'prop-types'


const MyAlert = ({onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}) => {
    console.log(onClosing)
    
    return (
        
        <Alert variant={alertVariant} onClose={()=> onClosing} dismissible style={{margin:'1rem'}}>
            <Alert.Heading>{alertHeading}</Alert.Heading>
            <p>{alertText}</p>  
            <ButtonToolbar>
                <ButtonGroup style={{margin:'.5rem .5rem .5rem 0'}}>
                    <Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>
                </ButtonGroup>
                <ButtonGroup style={{margin:'.5rem'}}>
                    <Button variant={alertVariant} onClick={() => onClosing}>Close</Button>
            </ButtonGroup>
            </ButtonToolbar>
            
        </Alert>
        
    )
}

MyAlert.defaultProps = {
    buttonText: 'OK'
}

/* MyAlert.propTypes = {
    onClosing: PropTypes.func
} */

export default MyAlert

这是我的实现

    {showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}

我将 setShowAlert 发送到的其他组件实现

    <ParameterList onRandomList={() => randomListOfInstruments()} onNewList={ () => addNewInstruments()} onClear={() => setShowAlert(true)}></ParameterList>

Answer 1

您对 MyAlert 组件的使用可能是这里的问题：

{showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}

您正在将值传递给 onClosing、alertHeading、alertText、alertVariant 道具 MyAlert，而 [=] 的实际道具15=] 是：

{onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}

其中，您还有 methodToExecute，您在加载警报时将其用作条件：

<Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>

基本上，由于您的 methodToExecute 始终未定义，因此单击此按钮将始终激活 onClosing。

解决方案是在使用 MyAlert 时添加所有必要的道具，或者至少在您传递给它的道具中包含 methodToExecute 函数，这样您的按钮就会将其绑定到 onClick 函数。

至于您作为道具传递给 MyAlert 的 onClosing，您还需要修复它，因为您在其实现中调用了以逗号 ',' 分隔的两个函数:

onClosing={() => setShowAlert(false), console.log("closing")}

正确的实施方式是：

onClosing={() => {
  setShowAlert(false);
  console.log("closing");
}}

React-Bootstrap 打开后立即发出警报 "onClose"

React-Bootstrap Alert firing "onClose" immediately upon opening

javascript

reactjs

react-bootstrap