reactjs - 无法在输入字段中输入 React
问题描述
我正在创建一个简单的待办事项列表。这里有一个更新表单的模式,我可以从状态中获取相关值并将它们设置为输入字段值。然后我无法编辑输入字段。我认为问题出在 onChange 函数或 value 属性上
import React from 'react'
import {useRef,useState,useEffect} from 'react'
import {FaTimes} from 'react-icons/fa'
export const Modal = ({edData,showModal,setShowModal,onAdd,setEd,tasks}) => {
const [text,setText] = useState('')
const[day,setDay] = useState('')
const[reminder,setReminder] = useState(false)
useEffect(() => {
if(edData!=null){
for(let i=0;i<tasks.length;i++)
{
if(tasks[i].id===edData){
// console.log(tasks[i])
setText(tasks[i].text)
setDay(tasks[i].day)
setReminder(tasks[i].reminder)
}
}
}
// inputText.current.value = edData.text;
// inputDay.current.value = edData.day;
// inputReminder.current.value = edData.reminder;
});
const closeModal = () =>{
setEd(null)
setShowModal(prev=>!prev)
setText('')
setDay('')
setReminder(false)
}
const onSubmit = (e) =>{
e.preventDefault()
if (!text){
alert('Please add a task')
return
}
onAdd({text,day,reminder})
setText('')
setDay('')
setReminder(false)
setShowModal(prev=>!prev)
}
return (
<>
{showModal?
<div className="background">
<div className="ModalWrapper" >
<div className="ModalContent">
<h2 className="modalTitle">{edData==null? 'Add New Task':'Update Task'}</h2>
<form className="add-form" onSubmit={onSubmit}>
<div className="form-control">
<label htmlFor="">Task</label>
<input type="text" placeholder="Add Task" name="" id="" value={text} onChange={(e) => setText(e.target.value)}/>
</div>
<div className="form-control ">
<label htmlFor="">Date & Time</label>
<input type="text" placeholder="Add Date and Time" name="" id="" value={day} onChange={(e) => setDay(e.target.value)}/>
</div>
<div className="form-control form-control-check">
<label htmlFor="">Set Reminder</label>
<input type="checkbox" checked={reminder} name="" id="" value={reminder} onChange={(e) => setReminder(e.currentTarget.checked)}/>
</div>
<input className="btn btn-block" type="submit" value="Save Task" />
</form >
</div>
<div className="CloseModalButton" onClick={closeModal}>
<FaTimes/>
</div>
</div>
</div>
: null}
</>
)
}
解决方案
如果您不将依赖数组传递给useEffect
它将在每个 render上调用,在其中调用并覆盖输入的值,如果您不希望它在每个 render 上运行,则setText
传递一个空数组:useEffect
useEffect(() => {
// ....
}, []);
推荐阅读
- visual-studio - asp.net core web api在iis express上工作,但在windows上的iis中不工作
- c++ - 如何将 unique_ptr.get() 的引用传递给函数
- python-3.x - 如果类实例总是通过引用传递?
- typescript - 在打字稿项目中导入纽曼(邮递员)?
- python - 循环遍历二维数组的快速方法
- c# - 使用 Xamarin ImageSource.FromUri("https://my image url") 如何判断是否已检索图像
- java - java中基于SSL TLS1.2的REST Web服务
- ios - 在 SwiftUI 中实现外接显示器支持
- reactjs - shopify/polaris react + rails 如何自定义“更多过滤器”按钮和工作表行为?
- c# - 如何调试使用来自另一个解决方案的 dll 的解决方案?