在自定义组件中反应本机访问引用 [英] React native accessing refs in a custom component
问题描述
我有一个自定义TextInput.当我编辑第一个TextInput并按下键盘上的下一步"时，我希望它聚焦第二个TextInput.我之前在Stack Overflow中进行过搜索，似乎可以使用ref进行搜索.但是我不确定如何使用自定义TextInput来做到这一点.
I have a custom TextInput. When I edit the first TextInput and hit the "Next" in the keyboard, I want it to focus the second TextInput. I have searched before in Stack Overflow and it seems I can do it using ref. However I'm not sure how to do that with custom TextInput.
这是我的基本CustomTextInput代码:
Here is my basic CustomTextInput code:
let CustomTextInput = React.createClass({
propTypes: {
refName: React.PropTypes.string,
returnKeyType: React.PropTypes.string,
onSubmitEditing: React.PropTypes.func
},
getDefaultProps: function(){
return {
refName: "",
returnKeyType: "default",
onSubmitEditing: () => {}
}
},
render: function(){
return(
<View>
<TextInput
ref={this.props.refName}
returnKeyType={this.props.returnKeyType}
onSubmitEditing={this.props.onSubmitEditing}
/>
</View>
)
}
});
module.exports = CustomTextInput
这是我的Parent类，调用它:
And here is my Parent class that calls it:
let MyParent = React.createClass({
render: function(){
return(
<View>
<CustomTextInput
refName={'firstNameInput'},
returnKeyType={'next'}
onSubmitEditing={(event) => {
this.refs.lastNameInput.focus();
}}
/>
<CustomTextInput
refName={'lastNameInput'}
/>
</View>
)
}
});
现在，当我按下键盘上的Next时，在选择firstName之后，我得到了一个例外:
Right now, when I press the Next in the keyboard, after selecting the firstName, I got an exception:
未定义不是对象(正在评估'_this2.refs.lastNameInput.focus')
undefined is not an object (evaluating '_this2.refs.lastNameInput.focus')
我不确定在那里做错了什么.任何帮助都将受到赞赏. :)
I'm not sure what I did wrong there.. Any help is appreciated. :)
推荐答案
让我们从CustomTextInput组件开始.
Let's start from the CustomTextInput component.
export default class CustomTextInput extends Component {
componentDidMount() {
if (this.props.onRef != null) {
this.props.onRef(this)
}
}
onSubmitEditing() {
this.props.onSubmitEditing();
}
focus() {
this.textInput.focus()
}
render() {
return (
<View>
<View style={this.state.isFocused ? styles.onFocusedStyle : styles.onBlurStyle}>
<TextInput
ref={input => this.textInput = input}
onSubmitEditing={this.onSubmitEditing.bind(this)}
/>
</View>
<Text style={styles.errorMessageField}>{this.state.errorStatus && this.props.errorMessage}</Text>
</View>
);
}}
在这里，我有一个示例customTextInput.这里要注意的重要事项是render方法中TextInput视图中的componentDidMount()，focus()方法和ref属性.
Here i have a sample customTextInput. Important things to note here is the componentDidMount(), focus() method and ref property in the TextInput view in render method.
-
componentDidMount()方法将整个CustomTextInput组件的引用传递到其父组件.通过该引用，我们将从父组件中调用CustomTextInput组件的focus方法.
componentDidMount() method passes the ref of the whole CustomTextInput component to it's parent component. Through that reference we will call the focus method of CustomTextInput component from the parent component.
focus()方法通过使用CustomTextInput组件内的TextInput组件的引用将textInput聚焦在CustomTextInput组件内.
focus() method here focuses the textInput inside the CustomTextInput component by using the ref of TextInput component inside the CustomTextInput component.
TextInput的ref属性存储TextInput的引用. focus()方法使用此引用.
The ref property of TextInput stores the reference of the TextInput. This reference is used by the focus() method.
现在让我们看一下父组件
Now let's see the parent component
export default class ParentComponent extends Component {
constructor(props) {
super(props);
this.focusNextField = this.focusNextField.bind(this);
this.inputs = {};
}
focusNextField(id) {
this.inputs[id].focus();
}
render() {
return (
<ScrollView
contentContainerStyle={{paddingBottom:100}}
keyboardDismissMode={'on-drag'}
scrollToTop={true}>
<View>
<View style={{marginTop: 10}}>
<CustomTextInput
onRef={(ref) => {
this.inputs['projectName'] = ref;
}}
onSubmitEditing={() => {
this.focusNextField('projectDescription');
}}
/>
</View>
<View style={{marginTop: 10}}>
<CustomTextInput
onRef={(ref) => {
this.inputs['projectDescription'] = ref;
}}
onSubmitEditing={() => {
this.focusNextField('subDivision');
}}
/>
</View>
<View style={{marginTop: 10}}>
<CustomTextInput
onRef={(ref) => {
this.inputs['subDivision'] = ref;
}}
onSubmitEditing={() => {
this.focusNextField('plan');
}}
/>
</View>
<View style={{marginTop: 10}}>
<CustomTextInput
onRef={(ref) => {
this.inputs['plan'] = ref;
}}
</View>
</View>
</ScrollView>
);
}}
在此处，我们在父组件中存储具有onRef属性的每个CustomTextInput的引用，当按下键盘上的提交按钮时，我们将调用下一个CustomTextInput的focus方法，而CustomTextInput的focus方法会将TextInput聚焦在子组件内部.
Here in the parent component we store the ref of each CustomTextInput with onRef property and when the submit button from keyboard is pressed we call the focus method of the next CustomTextInput and the focus method of CustomTextInput focuses the TextInput inside the child component.
这篇关于在自定义组件中反应本机访问引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
