Ich habe eine Liste von Arrays und wenn ich anfange, in die input
Liste von Arrays einzugeben, wird entsprechend gefiltert value
. Es funktioniert, aber ich verliere den Fokus, input
nachdem ich ein Zeichen eingegeben habe.
Mein Code:
const MyPage = (props) => {
const [searchTerm, setSearchTerm] = useState("");
const results = !searchTerm
? people
: people.filter(person =>
person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
);
const handleChange = event => {
setSearchTerm(event.target.value);
};
const Desktop = ({ children }) => {
const isDesktop = useMediaQuery({ minWidth: 992 })
return (
isDesktop?
<View>
<input
type="text"
placeholder="Search"
value={searchTerm}
onChange={handleChange}
/>
<View style={{width:100, height:100, backgroundColor:'red'}}>
{results.map(item => (
<Text>{item}</Text>
))}
</View>
</View>
:null
)
}
return(
<View style={{width:'100%',justifyContent:'center'}}>
<Desktop/>
</View>
)
}
Anstatt zurückzukehren, <Desktop/>
wenn ich direkt setze
<input
type="text"
placeholder="Search"
value={searchTerm}
onChange={handleChange}
/>
<View style={{width:100, height:100, backgroundColor:'red'}}>
{results.map(item => (
<Text>{item}</Text>
))}
</View>
Es wird klappen. Irgendeine Idee, wie man dieses Problem behebt?
Jeder Rat oder Kommentar wird geschätzt!
Danke im Voraus!
reactjs
react-native
kirimi
quelle
quelle
Antworten:
Durch Verschieben der
Desktop
Komponente außerhalb derMyApp
Komponente wird dieses Problem behoben. Der Hauptgrund dafür ist, dass dieDesktop
Komponente bei jedem Rendern (bei jeder Eingabe) neu erstellt wird, wodurch das Eingabeelement seinen Fokus verliert. Sie können dies auch etwas abmildern, indem Sie die HooksuseCallback
und verwendenuseMemo
, die beide in der offiziellen React-Dokumentation ausführlich beschrieben sind. In diesem Beispiel werden sie jedoch nicht benötigt.Siehe auch diese Antwort zum Deklarieren anderer Komponenten innerhalb einer Komponente .
quelle
Verwenden Sie die
autoFocus={true}
Eigenschaft der Eingabequelle
Auch als Hacky-Trick können Sie die
autoFocus
Eigenschaft Ihrer Eingabe verwenden:quelle
Das Problem ist, dass Sie eine Komponente in einer Komponente haben. Wenn sich Ihr Status ändert, wird die
Desktop
Komponente neu initialisiert , wodurch derinput
Fokus verloren geht. Ich habe beide Komponenten in einer zusammengeführt. Wenn Sie tatsächlich eineDesktop
eigene Komponente sein müssen, möchten Sie diese möglicherweiseDesktop
außerhalb von deklarierenMyPage
undsearchTerm, results, handleChange
als Requisiten an übergebenDesktop
.quelle