将数据传递到Reactstrap模式

问题描述

我的应用程序中有一些类别。对于每个类别，我想添加一些图像。因此，我在reactstrap中添加了一个模态，以显示一个模态窗口以添加一些文件和描述。到目前为止，一切都很好。但是，当我单击启动模式按钮（在此处添加文件）时，问题就来了，我无法将ID传递给模式。我尝试使用useState挂钩为变量设置值，但只有在模式关闭后才能获取值。

我的姓名缩写类似

const [categories,setCategories] = useState([])
const [categoryId,setCategoryId] = useState()
const [modal,setModal] = useState(false)

const toggle = (id) => {
    setCategoryId(id)
    setModal(!modal);
}

然后我的代码显示类别

{ categories.map( cat => (
    <div className="card border-0 rounded-0 img-thumbnail">
        <img src={'assets/images/image_upload.jpg'} value={t._id} className="img-thumbnail" onClick={()=>toggle(cat._id)} alt="..."/>
    </div>               
)) }

<Modal 
    isOpen={modal} 
    toggle={toggle} 
    centered={true}
>
    <ModalBody>
        <div className="p-2">
            <form>
                <div className="form-group">
                    <input type="file" className="form-control-file" id="exampleFormControlFile1"/>
                </div>
                <div className="form-group">
                    <input type="text" className="form-control" id="exampleInputPassword1" placeholder="Caption Title"/>
                </div>
                <div className="form-group">
                    <textarea className="form-control" placeholder="Description" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
                <button type="submit" className="btn btn-form">Upload</button>
                <span onClick={toggle} style={{cursor: 'pointer'}} className="ml-2 btn btn-form-outline">Cancel</span>
            </form>
        </div>
    </ModalBody>
</Modal>

仅在模式关闭后才获得类别ID。如何设置模态窗口的值？???

解决方法

这里的问题是，当打开和关闭模式时也会调用toggle。如果模态应该关闭或打开，并且可以在单独的调用中设置toggle，则可以专门使用id函数来设置状态。

const toggle = () => {
    // setCategoryId(id) // remove this
    setModal(!modal);
}

<img onClick={()=>{toggle(); setCategoryId(cat._id)}} />