Question

我正在从事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？

Answer 1

如果要访问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将自动成为焦点。

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

1 个答案: