reactjs - 反应引导模式中的输入字段在每次击键时重新呈现模式

问题描述

目标：我正在尝试创建一个在单击空div容器时打开的模态表单，然后我可以在其中将图像 URL 输入到模态中的表单中。然后，该链接将填充 div 容器中的 img 标签。

问题：第一次击键后，模式刷新，我必须单击输入字段才能继续。我一次只能输入一个字母。我不认为这是一个需要 e.preventDefault 的问题，因为这是在我点击提交之前发生的。我还尝试将它用作我的 onchange 方法中的第二个参数，以使其有可能起作用。

仅在我将输入字段的值设置为状态并onChange包含事件后才会出现此问题。

这是我在终端收到的错误：

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

这让我想到了一个关于堆栈溢出的问题，其中的场景相似，但到目前为止列出的解决方案还没有奏效。但是一个主要的收获是，这可能会导致状态变化导致模态重新渲染。我已经开始尝试实施useRef，但到目前为止一直没有成功。

编辑：我在仔细研究之后意识到useRef我的尝试很糟糕，但是我时间很短，并且在学习如何使用它的同时尝试输入它。

第二次编辑：在那天晚上和第二天早上阅读了一堆之后，我找到了两个解决方案，useRef并且FormData，后一种方法我还没有成功，但我相信它在正确使用时会起作用。我在下面更新了我的代码以包含我的进度。我还没有弄清楚如何用钩子更新 dom。

第三次编辑：我成功更新了数据库，但 dom 只在刷新后更新。另外，我打算只更新一个 div，但我更新了所有 50 个。我认为这是因为我放置了我的表单。所以，我正在尝试学习如何使用 forwardRef 和 useImparetiveHandle，这样我就可以更新存储在父组件中的状态，并向下传递多个 ref。

我认为同样重要的是要注意，我的突破是访问我通过添加 alert(imageRef.current.value)到 handleSubmit 方法确认的 useRef 数据。

下面是我的代码片段，其中包含了不同的方法被注释掉的区域

///INITIAL APPROACH
 const textInput = useRef(null) 
            const [url, setUrl] = useState("")
            const handleChange = (urlData) => {
                // e.preventDefault()
                // console.log(e.target.value)
                // setUrl(prevUrl => prevUrl)
                // setUrl(prevUrl => prevUrl + e.target.value)
                setUrl(urlData)
                // debugger            
                
                // setUrl(url + e.target.value)
            }


const ModalForm = () => {
            return(
                <Modal 
                    // animation={false}
                    show={openModalForm} 
                    onHide={modalToggle}
                    url={url}
                    // data-keyboard="false"
                     data-backdrop="static"
                >
                    <Modal.Header>
                        <button  
                        className="modalBtn"  
                        onClick={modalToggle}
                        >X</button>

                    </Modal.Header>
                    <form onSubmit={addPhoto}  >
                        <input 
                        ref={textInput}
                        type="text"
                        value={url}
                        // onChange={console.log(url)}
                        onChange={(e) => {setUrl(e.target.value)}}
                        // onChange={handleChange}
                        // onChange={(e) => handleChange(e)}
                        // onChange={(e) => handleChange(e, e.target.value)}
                        />
                    </form>
                        <p></p>

                </Modal>)}
/// UPDATED APPROACH

const imageRef = useRef()
                const detailRef = useRef()
                const [url, setUrl] = useState("")
                const [details, setDetails] = useState("")
                const handleSubmit = (e) => {
                    e.preventDefault()
                    console.log(e)
                    fetch(`http://localhost:3000/photos/${photo.id}`, {
                        method: 'PATCH',
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            image: imageRef.current.value,
                            details: detailRef.current.value 
                    })
                })
                    .then(res => res.json())
                    .then(photoObj =>
                        console.log(photoObj)
                        // (updatedBox) => {
                        //     setUrl(photo.image)
                        //     setDetails(photo.details)
                        // }
                    )
                }


 <form 
                    ref={form}
                    onSubmit={handleSubmit}
                    >
                        
                        <input 
                        type="text"
                        name="image"
                        placeholder="url"
                        ref={imageRef}
                        />
                        <input
                        type="text"
                        name="details"
                        placeholder="details"
                        ref={detailRef}
                        />
                        <button type="submit">ENTER</button>
                    </form>

标签： reactjsbootstrap-modaluse-ref

reactjs - 反应引导模式中的输入字段在每次击键时重新呈现模式

问题描述

解决方案

推荐阅读