React Native : 警告:将 ref 添加到 TextInput 后，无法为无状态函数组件提供 refs

Question

将 ref 添加到 TextInput 后，我收到警告"无状态函数组件无法获得 refs。尝试访问此引用将失败"，我无法聚焦文本输入。为什么它不起作用。

export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
render() {
return(
<View style={{ flex: 1 }}>
<ScrollView ref="scrollView" style={[styles.container]}>
<View style={styles.inputField}>
<Image
source={require('../images/username.png')}
style={[styles.icon]}
/>
<TextInput
style={styles.input}
placeholder="Username"
returnKeyType="next"
placeholderTextColor="grey"
onSubmitEditing={(event)=>this.textInput.focus()}
onChangeText={(username) => this.setState({ username 
})}
blurOnSubmit={false}
value={this.state.username}
/>
</View>
<View style={styles.inputField}>
<Image
source={require('../images/password.png')}
style={[styles.icon]}
/>
<TextInput
style={styles.input}
placeholder="Password"
placeholderTextColor="grey"
underlineColorAndroid={'transparent'}
onChangeText={(password) => this.setState({ password })}
ref={(input) => { this.textInput = input; }}
returnKeyType="done"
value={this.state.password}
secureTextEntry={true}
blurOnSubmit={true}
/>                  
</View>
</ScrollView>
</View>
)
}

更新：我更新了代码以更好地理解。

Answer 1

为了使用ref={(input) => { this.textInput = input; }}和onChangeText={(username) => this.setState({ username })}，您不能使用无状态组件。您可以使用 PureComponent 或 Component.我认为您应该使用 PureComponent。此外，还必须添加一个构造函数来初始化您的状态。试试这个：

import React, {PureComponent} from 'react';
class YourComponentName extends PureComponent {
constructor(){
super()
this.state={
username:'',
password:''
}
}
render() {
return (
//Your render function code
.
.
.
<TextInput
style={styles.input}
placeholder="Username"
returnKeyType="next"
placeholderTextColor="grey"
onSubmitEditing={(event)=>this.textInput.focus()}
onChangeText={(username) => this.setState({ username })}
blurOnSubmit={false}
value={this.state.username}
/>
.
.
.
<TextInput
style={styles.input}
placeholder="Password"
placeholderTextColor="grey"
underlineColorAndroid={'transparent'}
onChangeText={(password) => this.setState({ password })}
ref={(input) => { this.textInput = input; }}
returnKeyType="done"
value={this.state.password}
secureTextEntry={true}
blurOnSubmit={true}
/>
);
}
}

Answer 2

很抱歉耽搁了。您可以在不使用引用的情况下执行此操作。尝试使用状态组件使用此方法：

export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
focusPasswordInput: false,
};
}
handleUsernameInputSubmit() {
this.setState({
focusPasswordInput:true
});
}
render()
{
return (
<View style={{flex: 1}}>
<ScrollView ref="scrollView" style={[styles.container]}>
<View style={styles.inputField}>
<Image
source={require('../images/username.png')}
style={[styles.icon]}
/>
<TextInput
style={styles.input}
placeholder="Username"
returnKeyType="next"
placeholderTextColor="grey"
onSubmitEditing={() => this.handleUsernameInputSubmit()}
onChangeText={(username) => this.setState({
username
})}
blurOnSubmit={false}
value={this.state.username}
/>
</View>
<View style={styles.inputField}>
<Image
source={require('../images/password.png')}
style={[styles.icon]}
/>
<TextInput
style={styles.input}
placeholder="Password"
placeholderTextColor="grey"
underlineColorAndroid={'transparent'}
onChangeText={(password) => this.setState({password})}
focus={this.state.focusPasswordInput}
returnKeyType="done"
value={this.state.password}
secureTextEntry={true}
blurOnSubmit={true}
/>
</View>
</ScrollView>
</View>
)
}
}