javascript - 反应js上的键盘事件onKeyPress

Question

const CarForm = () => {
    const data = useContext(userContext)
    const [showForm, setShowForm] = useState(false);

    const update = () => {
        db.collection("prospects").doc(data.document).update({
            plates: carData.plates,
            motorNumber: carData.motorNumber,
            serialNumber: carData.serialNumber
        })
        .then(function() {
            console.log(`Document successfully updated!`);
        })
        .catch(function(error) {
            // The document probably doesn't exist.
            console.error("Error updating document: ", error);
        });
    }

    const [plates, setPlates] = useState();
    const [enteredPlates, setEnteredPlates] = useState();
    const [found, setFound] = useState();
    const [carData, setCarData] = useState();

    const getPlates = () => {
        let plates = db.collection('plates');
        plates.onSnapshot((querySnapshot) => {
            const docs = [];
            querySnapshot.forEach((doc) => {
                docs.push({...doc.data(), id: doc.id})
            });
            setPlates(docs);
        });
    }

    useEffect(() => {
        getPlates();
    }, [])

    const findPlates = (e) => {
        e.preventDefault();
        if(plates.find(p => p.plates === enteredPlates)) {
            const x = plates.find(p => p.plates === enteredPlates)
            setCarData({...carData, plates: x.plates, motorNumber: x.motorNumber, serialNumber: x.serialNumber})
            setFound(true)
        } else {
            setCarData({...carData, plates: enteredPlates})
            setFound(false);
        }
        setShowForm(true)
    }
    const handleEvent = (event) => {
        if(event.keyCode === 13) {
            event.preventDefault();
            setEnteredPlates(event.target.value);
            findPlates()
        }
    }

    return ( 
        <>
        {
            plates ? 
            <div className='Container'>
            <form className='data-form'>
                <label htmlFor='placa'>Número de placa</label>
                <div style={style.cont}>
                    <input type='text' name='placa' id='placas' onKeyPress={handleEvent}/>
                    <i className="fa fa-search" onClick={findPlates} style={style.icon}></i>
                </div>
                {showForm === true &&
                  <>
                  {
                    found === true ? 
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' value={carData.serialNumber}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' value={carData.motorNumber}/>
                    </>
                    :
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' onChange={e=> setCarData({...carData, serialNumber: e.target.value})}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' onChange={e=> setCarData({...carData, motorNumber: e.target.value})}/>
                    </>
                }
                  </>
                }
            </form>
            {showForm === true &&
              <GeneralButton text='Continuar' route='/datos-personales' back='/planes' click={update}/>
            }
        </div>
        : <Loading />
    }
        </>
     );
}
 
export default CarForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的代码有问题。当用户在“输入”类型=文本中按下回车键时，我试图触发一个函数，该函数将输入值设置为一个状态，然后执行一个在对象中搜索输入值的函数。直到现在我的代码不起作用，我不明白我做错了什么，有人可以帮助我吗？非常感谢你的帮助

这是我的功能

const handleEvent = (event) => {
        if(event.keyCode === 13) {
            event.preventDefault();
            setEnteredPlates(event.target.value);
            findPlates()
        }
    }

这是输入

<input type='text' name='placa' id='placas' onKeyPress={handleEvent}/>

这是从处理程序调用的另一个函数：

    const findPlates = (e) => {
        e.preventDefault();
        if(plates.find(p => p.plates === enteredPlates)) {
            const x = plates.find(p => p.plates === enteredPlates)
            setCarData({...carData, plates: x.plates, motorNumber: x.motorNumber, serialNumber: x.serialNumber})
            setFound(true)
        } else {
            setCarData({...carData, plates: enteredPlates})
            setFound(false);
        }
        setShowForm(true)
    }

这是所有返回部分：

return ( 
        <>
        {
            plates ? 
            <div className='Container'>
            <form className='data-form'>
                <label htmlFor='placa'>Número de placa</label>
                <div style={style.cont}>
                    <input type='text' name='placa' id='placas' onKeyPress={handleEvent}/>
                    <i className="fa fa-search" onClick={findPlates} style={style.icon}></i>
                </div>
                {showForm === true &&
                  <>
                  {
                    found === true ? 
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' value={carData.serialNumber}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' value={carData.motorNumber}/>
                    </>
                    :
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' onChange={e=> setCarData({...carData, serialNumber: e.target.value})}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' onChange={e=> setCarData({...carData, motorNumber: e.target.value})}/>
                    </>
                }
                  </>
                }
            </form>
            {showForm === true &&
              <GeneralButton text='Continuar' route='/datos-personales' back='/planes' click={update}/>
            }
        </div>
        : <Loading />
    }
        </>
     );

标签： javascriptreactjseventsreact-hookskeylistener

Answer 1

尝试这个：

const handleEvent = (event) => {
    if(event.key === 'Enter') {
        event.preventDefault();
        setEnteredPlates(event.target.value);
        findPlates()
    }
}