将数据传递给 Reactstrap 模态

Question

我的应用程序中有一些类别。对于每个类别，我想添加一些图像。所以我在 reactstrap 中添加了一个 Modal 来显示一个模态 window 来添加一些文件和描述。到目前为止一切都很好。但是当我单击启动模式按钮（在此处添加文件）时，问题就来了，我无法将 id 传递给 Modal。我尝试使用 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。如何设置值以及模态 window?????

Answer 1

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

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

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

将数据传递给 Reactstrap 模态

Passing data to Reactstrap modal

javascript

reactjs

react-props

reactstrap