输入字符后反应输入文本框失去焦点
React input text box loses focus after typing a character
我看到这是一个常见问题,但无法从其他答案中找出解决方案,因为他们不遵循我所采用的相同过程。这是我原来问题的后续:.
基本上每次我键入一个字符时,弹出窗口都会重新呈现,导致输入框失去焦点。
const App() {
const [units, setUnits] = useState('');
const [showPopUp, setShowPopUp] = useState(false);
const [teamState, setTeamState] = useState(null);
const [lineState, setLineState] = useState(null);
...
function PopUp() {
return (
<div id="popUp" className={popUpStyle}>
<div className="pop-up-bg"> </div>
<div className="pop-up">
<img className='close-button' src={closeButton} onClick={hpu} />
{teamState && lineState && betslip(teamState, lineState)}
</div>
</div>
)
}
function handleChange(event) {
setUnits(event.target.value)
}
const betslip = (team, line) =>
(
<div className='betslip'>
<h1 className="betslip-header">Betslip</h1>
<div >
<table className="betslip-table">
<tr>
<th>Team</th>
<th>Line</th>
<th>Unit(s)</th>
</tr>
<tr >
<td className='betslip-td'>{team}</td>
<td className='betslip-td'>{linePlusMinus(line)}</td>
<td className='betslip-td'>
<div className='unit-div'>
<input type='text' className='unit-input' onChange={e => setUnits(e.target.value)} value={units}/>
</div>
</td>
</tr>
</table>
<table className="betslip-table">
<tr>
<th>Risk</th>
<td className='betslip-td'>{units}</td>
</tr>
<tr>
<th>Reward</th>
<td className='betslip-td'>{reward(units, line)}</td>
</tr>
</table>
</div>
</div>
);
function spu(team, line){
setTeamState(team);
setLineState(line);
setPopUpHtml(betslip(teamState, lineState));
setShowPopUp(true);
}
function hpu(){
setShowPopUp(false);
}
...
return(
<div className="container">
{ showPopUp && <PopUp />}
...
)}
尝试隔离投注单:
const betslip = (team, line) =>{
const [units, setUnits] = useState('');
return <div className='betslip'>
<h1 className="betslip-header">Betslip</h1>
<div >
<table className="betslip-table">
<tr>
<th>Team</th>
<th>Line</th>
<th>Unit(s)</th>
</tr>
<tr >
<td className='betslip-td'>{team}</td>
<td className='betslip-td'>{linePlusMinus(line)}</td>
<td className='betslip-td'>
<div className='unit-div'>
<input type='text' className='unit-input' onChange={e => setUnits(e.target.value)} value={units}/>
</div>
</td>
</tr>
</table>
<table className="betslip-table">
<tr>
<th>Risk</th>
<td className='betslip-td'>{units}</td>
</tr>
<tr>
<th>Reward</th>
<td className='betslip-td'>{reward(units, line)}</td>
</tr>
</table>
</div>
</div>
}
编辑:因此您可以尝试将 getLips() 分离为一个独立的组件,而不与任何其他组件共享状态。据我所知,只有 Betslip
使用单位
我看到这是一个常见问题,但无法从其他答案中找出解决方案,因为他们不遵循我所采用的相同过程。这是我原来问题的后续:
基本上每次我键入一个字符时,弹出窗口都会重新呈现,导致输入框失去焦点。
const App() {
const [units, setUnits] = useState('');
const [showPopUp, setShowPopUp] = useState(false);
const [teamState, setTeamState] = useState(null);
const [lineState, setLineState] = useState(null);
...
function PopUp() {
return (
<div id="popUp" className={popUpStyle}>
<div className="pop-up-bg"> </div>
<div className="pop-up">
<img className='close-button' src={closeButton} onClick={hpu} />
{teamState && lineState && betslip(teamState, lineState)}
</div>
</div>
)
}
function handleChange(event) {
setUnits(event.target.value)
}
const betslip = (team, line) =>
(
<div className='betslip'>
<h1 className="betslip-header">Betslip</h1>
<div >
<table className="betslip-table">
<tr>
<th>Team</th>
<th>Line</th>
<th>Unit(s)</th>
</tr>
<tr >
<td className='betslip-td'>{team}</td>
<td className='betslip-td'>{linePlusMinus(line)}</td>
<td className='betslip-td'>
<div className='unit-div'>
<input type='text' className='unit-input' onChange={e => setUnits(e.target.value)} value={units}/>
</div>
</td>
</tr>
</table>
<table className="betslip-table">
<tr>
<th>Risk</th>
<td className='betslip-td'>{units}</td>
</tr>
<tr>
<th>Reward</th>
<td className='betslip-td'>{reward(units, line)}</td>
</tr>
</table>
</div>
</div>
);
function spu(team, line){
setTeamState(team);
setLineState(line);
setPopUpHtml(betslip(teamState, lineState));
setShowPopUp(true);
}
function hpu(){
setShowPopUp(false);
}
...
return(
<div className="container">
{ showPopUp && <PopUp />}
...
)}
尝试隔离投注单:
const betslip = (team, line) =>{
const [units, setUnits] = useState('');
return <div className='betslip'>
<h1 className="betslip-header">Betslip</h1>
<div >
<table className="betslip-table">
<tr>
<th>Team</th>
<th>Line</th>
<th>Unit(s)</th>
</tr>
<tr >
<td className='betslip-td'>{team}</td>
<td className='betslip-td'>{linePlusMinus(line)}</td>
<td className='betslip-td'>
<div className='unit-div'>
<input type='text' className='unit-input' onChange={e => setUnits(e.target.value)} value={units}/>
</div>
</td>
</tr>
</table>
<table className="betslip-table">
<tr>
<th>Risk</th>
<td className='betslip-td'>{units}</td>
</tr>
<tr>
<th>Reward</th>
<td className='betslip-td'>{reward(units, line)}</td>
</tr>
</table>
</div>
</div>
}
编辑:因此您可以尝试将 getLips() 分离为一个独立的组件,而不与任何其他组件共享状态。据我所知,只有 Betslip
使用单位