输入字符后反应输入文本框失去焦点

Question

我认为这是一个常见问题，但无法从其他答案中找出解决方案，因为他们不遵循我的相同流程。这是我最初的问题的后续：useState variable not holding its state during onChange event。

基本上每次我输入一个字符时，popUp 都会重新渲染，导致输入框失去焦点。

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 />}
...
)}

Answer 1

尝试隔离 Betslip：

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 使用