React 在第一個字符后失去對輸入的關注

Question

每次我打字時，我都會失去輸入文本的焦點。 我還有其他工作正常的組件； 但是這個正在失去焦點。 知道為什么會這樣嗎？

我嘗試創建單獨的組件並在我的開關中渲染它們，但仍然無法正常工作。

我用 Switch 語句渲染了其他組件，並且工作正常。

const FactionDetail = ({Faction}) => {
const [tab, setTab] = React.useState(0)
const [selectedMember, setSelectedMember] = React.useState(null)

const [receipt, setReceipt] = React.useState('')
const [selectedRank, setSelectedRank] = React.useState(null)

const [newRankDetails, setNewRankDetails] = React.useState({
    rankName: '',
    wage: 0,
    hasPerm: false
})

const menuOption = (tabId) =>{
    setTab(tabId)
}

const selectMember = (e) =>{
    setSelectedMember(e)
}

const renderDropdownOptions = () =>{
    let i  = 0
    for (const rank in Faction.ranks){
        i++
        return <option key = {i} value = {rank}>{rank}</option>
    }
}

React.useEffect(() =>{
    if(selectedMember != null && selectedRank != selectedMember.rank){
        setSelectedRank(selectedMember.rank)
    }
}, [selectedMember])

const RightBody = () =>{
    switch(tab){
        case 0: // Dashboard
            return <>
            
            </>
        case 1: //Members
            return <> </>
                  
        case 2: //Manage
            return <>
                <div className ='CreateRanks'>
                    <label>Rank Name</label>
                    <input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, rankName: e.target.value}})} value = {newRankDetails.rankName}></input>
                    <label>Wage</label>
                    <input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, wage: e.target.value}})} value = {newRankDetails.wage}></input>
                    <label>Has Perm</label>
                    <input type="checkbox" onChange = {(e) => setNewRankDetails((prev) => {return {...prev, hasPerm: e.target.checked}})} value = {newRankDetails.hasPerm} />
                    <button onClick = {() =>{ updateClient('factions:createNewRank', newRankDetails)}}>Create</button>
                </div>

            </>
        default: 
            return<>{tab}</>
    }
}

Answer 1

我在“主要”組件中渲染了兩個組件； 因此來自 useStates 的數據被混合和重新渲染。

Answer 2

<input style ={{width:'80px'}} onChange = {(e) => saveDetails(e, 'Rank Name')} value = {newRankDetails.rankName}></input>


const saveDetails=(e, param:string)=>{
e.preventDefault();
if(param==='Rank Name'){
setNewRankDetails((prev) =>  {...prev, rankName: e.target.value})
}else if(param==='Wage'){
setNewRankDetails((prev) =>  {...prev, wage: e.target.value})
}
}