Це можна зробити без використання реф . Такий підхід є кращим, оскільки посилання можуть призвести до крихкого коду . Документи React радять знайти інші рішення, де це можливо:
Якщо ви не запрограмували декілька додатків за допомогою React, ваш перший схил, як правило, намагатиметься використовувати рефлекси, щоб "зробити все" у вашому додатку. Якщо це так, знайдіть мить і критичніше подумайте про те, де має належати держава в ієрархії компонентів. Часто стає зрозумілим, що належне місце для "володіння" цим станом знаходиться на більш високому рівні в ієрархії. Якщо розмістити стан там, часто виключається будь-яке бажання використовувати рефлекси, щоб "зробити щось" - натомість потік даних зазвичай досягне вашої мети.
Замість цього ми будемо використовувати змінну стану для фокусування другого поля введення.
Додайте змінну стану, яку ми передамо як опору для DescriptionInput
:
initialState() {
return {
focusDescriptionInput: false,
};
}
Визначте метод обробника, який встановить цю змінну стану на істинне:
handleTitleInputSubmit() {
this.setState(focusDescriptionInput: true);
}
Після подання / натискання клавіші "вхід / наступний" TitleInput
ми зателефонуємо handleTitleInputSubmit
. Це встановить focusDescriptionInput
так.
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={this.handleTitleInputSubmit}
/>
DescriptionInput
«S focus
проп встановлюються в нашому focusDescriptionInput
змінне стані. Отже, коли focusDescriptionInput
зміни (на кроці 3), DescriptionInput
повторно відображатиметься з focus={true}
.
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description"
focus={this.state.focusDescriptionInput}
/>
Це хороший спосіб уникнути використання посилань, оскільки посилання можуть призвести до більш крихкого коду :)
EDIT: h / t до @LaneRettig, щоб вказати, що вам потрібно обгорнути React Native TextInput деякими доданими реквізитами та методами, щоб змусити його реагувати на focus
:
// Props:
static propTypes = {
focus: PropTypes.bool,
}
static defaultProps = {
focus: false,
}
// Methods:
focus() {
this._component.focus();
}
componentWillReceiveProps(nextProps) {
const {focus} = nextProps;
focus && this.focus();
}