Cześć,
Próbuję ustawić początkowy focus formularza na jednym z pól - a z pewnych przyczyn (mam sprawdzony formularz który działa i chciałbym jak najmniej w nim zmieniać - nie chcę używać autoFocus)
const InputForm =()=>{return(<div> <form id='myForm' onSubmit={this.props.SubmitFunction}>
<label className= 'm-2' ></label>
<input required id= "name" placeholder="Name..." type="text" value={this.props.name} onChange={this.props.ChangeName}/>
<label className= 'm-2'></label>
<input required type="text" id='email' placeholder="Email..." value={this.props.email} onChange={this.props.ChangeEmail}/>
</form></div>)}
Pomysł był taki, aby nadać focus w component DidMount
componentDidMount() {
fetch(this.props.source)
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(json => this.setState({
staff: json.map(ob => Object.values(ob)),
nonFilteredStaff: json.map(ob => Object.values(ob)),
}));
var toGetFocus =document.getElementById("name");
toGetFocus.focus();
}
Niestety uporczywie dostaję komunikat o błędzie 'toGetFocus is null'
Co jest nie tak? Zakładałam, ze w stanie DidMount już wszystko jest przypisane... stąd taka konstrukcja.
Można to jakoś na szybko poprawić?
Natomiast jeszcze dwa słowa o konstrukcji i prośba o sugestię.
Mam dwa dość podobne projekciki
W** drugim** z nich, którego fragment widzicie, jest problem z po pierwsze złapaniem w ogóle focusa na formularzu. Jeżeli już użyję focusAuto, jest problem z przejściem do drugiego pola.
W pierwszym, którego nie widzicie ale różnice opisze za chwilę, nie ma problemu z przechodzeniem między polami przez przeniesienie kursora.
Różnica jest taka, że** drugi** jest dzieckiem i dostaje wszystko w propsach, nie ma własnego stanu.
pierwszy natomiast korzysta z własnego stanu (ściśle - komponentu w którym jest zawarty; jego kod nie jest zawarty w osobnym, wywoływalnym elemencie, nie dostaje propsów)