Estoy creando una aplicación de chat web en next.js y tengo un botón selector de emoji que cuando se hace clic en el menú de emojis aparece. La cuestión es que para que el usuario vea el menú de emojis, tiene que desplazarse hacia abajo. Tengo probé scrollIntoView() pero no parece funcionar, posiblemente estoy haciendo algo mal.
<EmoticonContainer > {showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)} </EmoticonContainer> <InputContainer id="container" > <IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}> <EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' /> </IconButton> <Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/> <div> <IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit"> <SendIcon></SendIcon> </IconButton> <IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}> <MicIcon ></MicIcon> </IconButton> <IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" > <StopIcon></StopIcon> </IconButton> </div> </InputContainer>He intentado esto pero no parece funcionar:
useEffect(() => { if(showEmojis) { document.getElementById('picker').scrollIntoView(true) } } , [showEmojis])En lugar de document.getElementById('picker').scrollIntoView(true) usa el gancho React.useRef() .
Por ejemplo, al comienzo de su función
const pickerRef = useRef()luego en tu gancho useEffect
useEffect(() => { if(showEmojis) { pickerRef.current.scrollIntoView(true) } } , [showEmojis])luego en tu cuerpo de vuelta
<Picker ref={pickerRef} id="picker" style={{width: '100%'}} onSelect={addEmoji}/>No se recomienda utilizar la consulta de javascript en jsx.