我有一个自定义的 TextInput。当我编辑第一个 TextInput
并点击键盘中的“下一步”时,我希望它聚焦第二个 TextInput
。我之前在 Stack Overflow 中搜索过,似乎我可以使用 ref
来完成。但是我不确定如何使用自定义 TextInput
来做到这一点。
这是我的基本 CustomTextInput 代码:
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
这是调用它的父类:
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
之后,我得到了一个异常:
undefined is not an object (evaluating '_this2.refs.lastNameInput.focus')
我不确定我在那里做错了什么。感谢任何帮助。 :)
最佳答案
让我们从 CustomTextInput 组件开始。
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。这里需要注意的重要事项是渲染方法中 TextInput View 中的 componentDidMount()、focus() 方法和 ref 属性。
componentDidMount() 方法将整个 CustomTextInput 组件的引用传递给它的父组件。通过该引用,我们将从父组件调用 CustomTextInput 组件的焦点方法。
此处的 focus() 方法通过使用 CustomTextInput 组件内 TextInput 组件的 ref 将 textInput 聚焦在 CustomTextInput 组件内。
TextInput 的 ref 属性存储了 TextInput 的引用。该引用由 focus() 方法使用。
现在让我们看看父组件
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 的焦点方法,CustomTextInput 的焦点方法将 TextInput 聚焦在子组件内。
关于javascript - 在自定义组件中 react native 访问引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36716207/