如何解决将数据传递到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)}} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。