无法在输入字段中输入 React

Question

我正在创建一个简单的待办事项列表。在这里有一个更新表单的模式，我可以从状态中获取相关值并将它们设置为输入字段值。那么我无法编辑输入字段。我认为问题出在 onChange 函数或值属性

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}
        </>
    )
}

Answer 1

如果您不将依赖项数组传递给 useEffect it will be called on every render，在其中调用 setText 并覆盖输入的值，请将空数组传递给 useEffect 如果您不希望它在每次渲染时都运行 :

useEffect(() => {
  // ....
}, []);

无法在输入字段中输入 React

Unable to type in input field React

onchange

reactjs

react-props

react-hooks

use-state