我試圖在搜索輸入集中時切換調光器。聚焦時我想顯示一個帶有淡入淡出影片的調光器，在不聚焦時我想隱藏一個帶有淡入淡出影片的調光器。
這是我的代碼：
import React from 'react';
import './SearchBox.scss';
import {IoSearchOutline} from 'react-icons/io5'
import $ from "jquery";
class SearchBox extends React.Component {
render() {
function Dimmer() {
const FocusInput = () => {
$(".searchDimmer").fadeIn(200);
}
const BlurInput = () => {
$(".searchDimmer").fadeOut(200);
}
}
return (
<div className="SearchBox">
<input
onFocus={FocusInput}
onBlur={BlurInput}
type="text"
className='SearchBoxInput'
id="SearchBoxInput" />
<button
className='SearchBoxSubmitButton ButtonCore button'
type='submit'>
<IoSearchOutline />
</button>
</div>
)
}
};
export default SearchBox;
謝謝。
uj5u.com熱心網友回復：
這可能會解決您的問題
import React from 'react';
import './SearchBox.scss';
import {IoSearchOutline} from 'react-icons/io5'
import $ from "jquery";
class SearchBox extends React.Component {
FocusInput() {
$(".searchDimmer").fadeIn(200);
}
BlurInput() {
$(".searchDimmer").fadeOut(200);
}
render() {
return (
<div className="SearchBox">
<input
onFocus={this.FocusInput}
onBlur={this.BlurInput}
type="text"
className='SearchBoxInput'
id="SearchBoxInput" />
<button
className='SearchBoxSubmitButton ButtonCore button'
type='submit'>
<IoSearchOutline />
</button>
</div>
)
}
}
export default SearchBox;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493538.html
上一篇：如何在Shiny應用程式中的多個表格上應用頂部和底部的水平滾動？
下一篇：對應復選框被選中的必填輸入欄位