Что такое ссылка в реагировать родной и когда я должен использовать реф? - PullRequest
Новая
       22

Что такое ссылка в реагировать родной и когда я должен использовать реф?

0 голосов
/ 14 октября 2019

Я работаю над проектом native native, я создал формы с компонентами реагировать на нативный. Я использовал TextInput для редактирования значения состояния следующим образом: 

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    onChangeText={sector => this.setState({ sector })}
/>

С помощью значения сектора console.log я правильно получаю текущее значение после изменения ввода, но я видел несколько примеров с ref, подобным этому: 

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => (this.sectorInput = input)}
    onChangeText={sector => this.setState({ sector })}
/>

Я не понимаю эту операцию: 

ref={input => (this.sectorInput = input)}

Может кто-нибудь объяснить, что такое ссылка и почему мы использовали с входом и когда я должен использовать ссылку?

1 Ответ

0 голосов
/ 14 октября 2019

Если вы хотите получить доступ к TextInput методам , то вам нужно создать ссылку на этот компонент, затем, используя ссылку, вы можете использовать его метод.

Например, у вас есть форма в вашем приложении ивы хотите, чтобы, когда пользователь заполнил первое поле, а после этого вы хотите установить фокус на следующее поле, вы можете сделать это следующим образом: 

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => { this.sectorInput = input}}
    onSubmitEditing={() => {
        this.nextField.focus();
    }}
    onChangeText={sector => this.setState({ sector })}
/>

<TextInput
    shake
    keyboardAppearance='light'
    autoFocus={false}
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='default'
    returnKeyType='next'
    value={this.state.sector}
    ref={input => { this.nextField = input}}
    onSubmitEditing={() => {
        this.handleSubmit();
    }}
    onChangeText={nextField => this.setState({ nextField })}
/>

Теперь, когда пользователь заполнит поле sector, тогда, если оннажмите далее, затем nextField автоматически сфокусируется.

...