输入框BUG

This commit is contained in:
tangly1024
2022-03-02 12:15:12 +08:00
parent 8d047e3db0
commit 707e77d700
4 changed files with 53 additions and 4 deletions

View File

@@ -36,16 +36,28 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
setSearchKey('')
}
let lock = false
const updateSearchKey = (val) => {
setSearchKey(val)
if (!lock) {
setSearchKey(val)
}
}
function lockSearchInput () {
lock = true
}
function unLockSearchInput () {
lock = false
}
return <div className='flex w-full bg-gray-100'>
<input
ref={searchInputRef}
type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={searchKey}
/>

View File

@@ -35,17 +35,28 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
searchInputRef.current.value = ''
setSearchKey('')
}
let lock = false
const updateSearchKey = (val) => {
setSearchKey(val)
if (!lock) {
setSearchKey(val)
}
}
function lockSearchInput () {
lock = true
}
function unLockSearchInput () {
lock = false
}
return <div className='flex'>
<input
ref={searchInputRef}
type='text'
className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>

View File

@@ -37,8 +37,18 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
setSearchKey('')
}
let lock = false
const updateSearchKey = (val) => {
setSearchKey(val)
if (!lock) {
setSearchKey(val)
}
}
function lockSearchInput () {
lock = true
}
function unLockSearchInput () {
lock = false
}
return <div className={'flex w-full bg-gray-100 ' + className}>
@@ -47,6 +57,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={searchKey}
/>

View File

@@ -39,9 +39,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
searchInputRef.current.value = ''
setShowClean(false)
}
let lock = false
function lockSearchInput () {
lock = true
}
function unLockSearchInput () {
lock = false
}
const [showClean, setShowClean] = useState(false)
const updateSearchKey = (val) => {
if (lock) {
return
}
searchInputRef.current.value = val
if (val) {
setShowClean(true)
@@ -57,6 +67,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>