Javascript 获取导致React中闪烁的输入值
我试图跟踪两个登录输入字段的值，方法是在更改时获取它们的值，并将该值存储在本地状态中，这样当用户提交登录时，我就可以从状态中获取当前值。然而，当我在输入中键入文本时，这会导致输入闪烁，当我在密码字段中键入时，光标会跳回电子邮件字段，这也是一个奇怪的小故障。这个小故障可以在下面观察到。注意，我没有将标签移回email字段，当我在password字段中键入密码时，它似乎是出于某种原因自动发生的 以下是我的profile_tile.js的代码，我将其作为嵌套在导航栏中的组件：Javascript 获取导致React中闪烁的输入值,javascript,css,reactjs,react-hooks,react-state-management,Javascript,Css,Reactjs,React Hooks,React State Management,我试图跟踪两个登录输入字段的值，方法是在更改时获取它们的值，并将该值存储在本地状态中，这样当用户提交登录时，我就可以从状态中获取当前值。然而，当我在输入中键入文本时，这会导致输入闪烁，当我在密码字段中键入时，光标会跳回电子邮件字段，这也是一个奇怪的小故障。这个小故障可以在下面观察到。注意，我没有将标签移回email字段，当我在password字段中键入密码时，它似乎是出于某种原因自动发生的 以下是我的profile_tile.js的代码，我将其作为嵌套在导航栏中的组件： import React
import React, { useState } from 'react'
import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
import { useSelector } from 'react-redux'
import Modal from '../../modal'
export default function ProfileTile() {
const firebase = useFirebase()
const auth = useSelector(state => state.firebase.auth)
const profile = useSelector(state => state.firebase.profile)
const [showLoginModal, setLoginModalShow] = useState(false)
const [showSignupModal, setSignupModalShow] = useState(false)
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const createNewUser = () => {
firebase.createUser({ email, password })
setLoginModalShow(false)
setSignupModalShow(false)
}
const handleEmailChange = event => {
setEmail(event.target.value)
console.log('EMAIL' + event.target.value)
}
const handlePasswordChange = event => {
setPassword(event.target.value)
console.log('PASSWORD' + event.target.value)
}
const logout = () => {
firebase.logout()
}
const handleLoginModalShow = () => {
setLoginModalShow(true)
setSignupModalShow(false)
}
const handleLoginModalHide = () => {
setLoginModalShow(false)
}
const handleSignupModalShow = () => {
setLoginModalShow(false)
setSignupModalShow(true)
}
const handleSignupModalHide = () => {
setSignupModalShow(false)
}
const handleLogin = () => {
firebase.login({ email: email, password: password })
setLoginModalShow(false)
setSignupModalShow(false)
}
const loginModal = showLoginModal ? (
<Modal>
<div class='vh-100 dt w-100 bg-black-80 overlay fixed z-999'>
<div class='v-mid dtc tc center '>
<article class='mw6 center br2 bg-white ba b--black-10'>
<svg
viewBox='0 0 12 12'
height='20'
width='20'
version='1.1'
onClick={handleLoginModalHide}
class='hand dim fr pr3 pt3'
>
<line
x1='1'
y1='10'
x2='10'
y2='1'
stroke='black'
stroke-width='1'
/>
<line
x1='1'
y1='1'
x2='10'
y2='10'
stroke='black'
stroke-width='1'
/>
</svg>
<main class='black-80'>
<form class='measure center mt3 mb4'>
<fieldset id='sign_up' class='ba b--transparent mh0'>
<div class='mt4'>
<input
class='ph2 pv3 input-reset ba b--black-10 w-100'
type='email'
name='email-address'
id='email-address'
placeholder='Email'
onChange={handleEmailChange}
/>
</div>
<div class='mv4'>
<input
class='ph2 pv3 input-reset ba b--black-10 w-100'
type='password'
name='password'
id='password'
placeholder='Password'
onChange={event => setPassword(event.target.value)}
/>
</div>
<a
href='#0'
class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
onClick={handleLogin}
>
Sign In
</a>
</fieldset>
<div class='lh-copy mv3'>
<a href='#0' class='f6 link dim black db'>
Forgot your password?
</a>
</div>
<hr class='bb mv3 b--black-10' />
<div class='pt2 flex justify-center'>
<span class='flex b mr2'>Don't have an account?</span>
<a
href='#0'
class='b link dim blue db'
onClick={handleSignupModalShow}
>
Sign Up
</a>
</div>
</form>
</main>
</article>
</div>
</div>
</Modal>
) : null
const signupModal = showSignupModal ? (
<Modal>
<div class='vh-100 dt w-100 bg-black-80 overlay fixed z-999'>
<div class='v-mid dtc tc center '>
<article class='mw6 center br2 bg-white ba b--black-10'>
<svg
viewBox='0 0 12 12'
height='20'
width='20'
version='1.1'
onClick={handleSignupModalHide}
class='hand dim fr pr3 pt3'
>
<line
x1='1'
y1='10'
x2='10'
y2='1'
stroke='black'
stroke-width='1'
/>
<line
x1='1'
y1='1'
x2='10'
y2='10'
stroke='black'
stroke-width='1'
/>
</svg>
<main class='black-80'>
<form class='measure center mt3 mb4'>
<fieldset id='sign_up' class='ba b--transparent mh0'>
<div class='mt4'>
<input
class='ph2 pv3 input-reset ba b--black-10 w-100'
type='email'
name='email-address'
id='email-address'
placeholder='Email'
onChange={handleEmailChange}
/>
</div>
<div class='mv4'>
<input
class='ph2 pv3 input-reset ba b--black-10 w-100'
type='password'
name='password'
id='password'
placeholder='Password'
onChange={handlePasswordChange}
/>
</div>
<a
href='#0'
class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
onClick={createNewUser}
>
Sign Up
</a>
</fieldset>
</form>
</main>
</article>
</div>
</div>
</Modal>
) : null
return (
<div>
<div class='flex items-center'>
{!isLoaded(auth) ? (
<a class='noselect br2 f6 fw6 dib blue mr2 bg-white ba b--blue no-underline pv3 ph4'>
loading
</a>
) : isEmpty(auth) ? (
<a
class='noselect br2 f6 fw6 dib mr2 bg-white blue grow no-underline pv3 ph4'
onClick={handleLoginModalShow}
>
Log In
</a>
) : (
<div class='flex'>
<span class='noselect br2 f6 fw6 dib white mr2 bg-purple no-underline pv3 ph4'>
<div>{profile.email}</div>
</span>
<a
class='noselect br2 f6 fw6 dib white mr2 bg-green grow no-underline pv3 ph4'
onClick={logout}
>
Log Out
</a>
</div>
)}
</div>
{loginModal}
{signupModal}
</div>
)
}
export default function Modal(props) {
useEffect(() => {
modalRoot.appendChild(modalElement)
return () => {
modalRoot.removeChild(modalElement)
}
}, []); // Empty dependency array to run once "on mount"
return ReactDOM.createPortal(props.children, modalElement);
}
你能发布你的整个组件吗？当我用您发布的代码创建一个沙盒时，它的工作方式与预期完全一致。马修莫兰：对不起，我想如果我把整件事都发出去，那就太过分了。我已经用相关组件更新了它。你的useEffect钩子没有一个依赖数组，它将在每个渲染上运行。您可能想在装载时附加一个子元素，所以请尝试一个空的依赖项数组。@DrewReese哇，您是对的，这对我很有用。如果你将此作为答复，我将接受。
export default function Modal(props) {
useEffect(() => {
modalRoot.appendChild(modalElement)
return () => {
modalRoot.removeChild(modalElement)
}
}, []); // Empty dependency array to run once "on mount"
return ReactDOM.createPortal(props.children, modalElement);
}