React Native中的ref是什么?何时应使用ref?

时间:2019-10-14 13:23:58

标签: forms react-native ref

我正在从事React Native项目,我创建了带有React 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)}

有人可以解释什么是ref,为什么我们要使用输入,何时应该使用ref?

1 个答案:

答案 0 :(得分:0)

如果要访问TextInput methods,则必须创建该组件的引用,然后使用引用可以使用它的方法。

例如,您的应用程序中有一个表单,并且您希望在用户填写第一个字段时想要该表单,然后在此之后您想将焦点放在下一个字段上,则可以这样操作:

<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将自动成为焦点。